簡單的文本格式框內問題

我一直在擺弄框內的文本一段時間，我注意到當屏幕調整框的頂部時，即使它不在代碼中，也總是添加這個額外的填充。是否有任何提示可以使屏幕尺寸在屏幕調整大小時不添加額外的填充？簡單的文本格式框內問題

* { 
 
    box-sizing: border-box; 
 
} 
 

 
/* Create three columns of equal width */ 
 
.columns { 
 
    float: left; 
 
    width: 33.3%; 
 
    padding: 8px; 
 
} 
 

 
/* Style the list */ 
 
.price { 
 
    list-style-type: none; 
 
    border: 1px solid #eee; 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-transition: 0.3s; 
 
    transition: 0.3s; 
 
} 
 

 
/* Add shadows on hover */ 
 
.price:hover { 
 
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) 
 
} 
 

 
/* Pricing header */ 
 
.price .header { 
 
    background-color: #111; 
 
    color: white; 
 
    font-size: 25px; 
 
} 
 

 
/* List items */ 
 
.price li { 
 
    border-bottom: 1px solid #eee; 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
/* Grey list item */ 
 
.price .grey { 
 
    background-color: #eee; 
 
    font-size: 20px; 
 
} 
 

 
/* The "Sign Up" button */ 
 
.button { 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    padding: 10px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
} 
 

 
/* Change the width of the three columns to 100% 
 
(to stack horizontally on small screens) */ 
 
@media only screen and (max-width: 600px) { 
 
    .columns { 
 
     width: 100%; 
 
    } 
 
} 
 
Try it Yourself »

<div class="columns"> 
 
    <ul class="price"> 
 
    <li class="header">Basic</li> 
 
    <li class="grey">$ 9.99/year</li> 
 
    <li>10GB Storage</li> 
 
    <li>10 Emails</li> 
 
    <li>10 Domains</li> 
 
    <li>1GB Bandwidth</li> 
 
    <li class="grey"><a href="#" class="button">Sign Up</a></li> 
 
    </ul> 
 
</div> 
 
<div style="position:relative;"> 
 
    <div style="color:#ddd;background-color:#282E34;text-align:center;padding:20px 20px;text-align: justify;"> 
 
    <H2 ALIGN="CENTER">PLAN IT</H2><BR>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu </p> 
 
     
 
    </div> 
 
</div>

來源

2017-05-19 Vzupo

僅供參考我相信'align'屬性自HTML5以來已被棄用 - 您可能希望考慮使用CSS集中對齊'H2'元素。 –

我修改了我的示例以顯示添加的填充。調整頁面大小，你會看到 – Vzupo

1日這就是你想要什麼？調整大小後，我看不到任何填充添加到您的標題。

第二次嘗試不使用內聯樣式，創建一個類並將其放入其中。

第三padding: 20px 20px;（20像素上/下，20像素左/右）等於padding: 20px;（20像素對所有4側）

第四創建一個類到中心的東西，因爲align="center"在HTML5棄用：

REF ：https://www.codehelp.co.uk/html/deprecated.html

.centered { 
    text-align: center; 
}

html, 
 
body { 
 
    margin: 0; 
 
} 
 

 
.mystyle { 
 
    color: #ddd; 
 
    background-color: #282E34; 
 
    text-align: center; 
 
    padding: 20px; 
 
    text-align: justify; 
 
} 
 

 
.centered { 
 
    text-align: center; 
 
}

<div style="position:relative;"> 
 
    <div class="mystyle"> 
 
    <H2 class="centered">PLAN IT</H2> 
 
    <BR>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
    publishing software like Aldus PageMaker including versions of Lorem Ipsu </p> 
 

 
    </div> 
 
</div>

來源

2017-05-19 01:53:18

我不太明白你是什麼意思？也許這是因爲我使用的是Chrome，所以我看不到你看到的。所以下面的答案完全基於想象力。對不起，

您可以使用F12來查看該樣式實際上是否可以通過瀏覽器添加的默認樣式。

要修復它，您可以將Reset CSS或normalize.css引入到您的頁面，但將它們放在每個其他css文件的前面。

或者只是簡單地規定在div {padding:0;margin:0;}一開始你的CSS的

來源

2017-05-19 01:55:47

可以使用外部CSS文件

做創建yourname.css

<head> 
    <link rel="stylesheet" href="path/to/external/stylesheet.css" /> 
</head>

在代碼添加<div id="yourpad" </div>

現在simplly編輯yourame.css和將此代碼

.yourpad {填充0像素0像素0像素}

來源

2017-05-19 01:58:53

簡單的文本格式框內問題

回答

相關問題