圍繞div創建填充？

Question

如何在div上創建填充而不是推出容器？

http://codepen.io/vincentccw/pen/jgGtd

創建2divs但後來當我設置填充它周圍的孩子DIV了推出？

Answer 1

HTML

<div> 
    <div>lol</div> 
</div> 

CSS

div{ 
    background:yellow; 
    width:auto; 
    height:auto; 
    padding:1em; 
} 
div div{ 
background:red; 
} 

Answer 2

這是默認盒模型的正常行爲，即填充和邊框尺寸添加到width屬性。

如果你想避免笨拙的計算，您可以更改使用box-sizing像這樣的預設模式（內容框）：

* { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

這將使宣佈的所有元素部分的填充和邊界或繼承寬度和高度，從而保持您的佈局完整。

現在，如果您要聲明寬度爲100％或100px，然後添加填充或邊框，則不會影響總寬度，但會將其包含在聲明寬度的範圍內。

Answer 3

填充位於元素的內部。我相信你想在這裏使用margin，這是在塊元素之外：

div{ 
    background:yellow; 
    width:400px; 
    height:200px; 
    margin:1em; 
} 
div div{ 
    margin:0; padding:0; border:0; 
    background:red; 
} 

Answer 4

試試這個（值可以根據你在做什麼改變）。我相信SoloLearn幫助我學習它（該應用程序是學習Android的HTML）。

<div width:100%;height:100%; style="background-color:white; color:black; padding:20px;">

寬度和高度自動調整自己，背景顏色使框顏色，顏色是文字顏色和填充內容後增加的空間。如果你想改變填充顏色，你也可以嵌套標籤，因爲沒有值或元素，我知道在標籤內部完成它。