HTML CSS框有填充和边距和100％宽度？ [英] HTML CSS Box with padding and margin and 100% width?
问题描述
我有一个框 #box ，宽度：100％，高度：100％，padding：5px，margin：5px; border：5px;
我需要在HTML5布局中正确显示。
p>
>
但是我需要在身体区域适合块。
代码：
<！DOCTYPE html>
< style>
body，html {
width：100％;
height：100％;
margin：0;
}
#box {
width：100％;
height：100％;
border：5px solid red;
padding：15px;
margin：20px;
}
< / style>
< body>
< div id =box>
文本将在这里
< / div>
< / body>
浏览器确实告诉他:)
但是我认为你不喜欢它的溢出。
会发生什么是你的 #box 因为您的边框和填充而扩展。您可以使这些属性插入，因此它不扩展您的元素。您可以使用 box-sizing ：
#box {
width：100％;
height：100％;
border：5px solid red;
padding：15px;
/ * margin：20px; * /
box-sizing：border-box;
}
但是您不能对 ，因为元素正在从身体推动自己：它做它想做的事情。
你可以做一个解决方法如上所述：
body
{
padding：20px;
box-sizing：border-box;
}
您将使用主体上的填充而不是边距 #box 。
jsFiddle
更新
双填充空间，你应该只应用它在body元素（或html，但我更喜欢的身体，因为这是你的视觉元素到底）。
I have a box #box with width: 100%, height: 100%, padding: 5px, margin: 5px; border: 5px;
I need in HTML5 layout correctly display that.
Now i have that:
But i need fit block in body area.
Code:
<!DOCTYPE html>
<style>
body,html {
width: 100%;
height: 100%;
margin: 0;
}
#box {
width: 100%;
height: 100%;
border: 5px solid red;
padding: 15px;
margin: 20px;
}
</style>
<body>
<div id="box">
Text will be here
</div>
</body>
The browser does excacly what you are telling him to do :) However I think you don't like the overflow it has.
What happens is that your #box expands because of your border and padding. You can make these properties inset, so it does not expand your element. You can do this with box-sizing:
#box {
width: 100%;
height: 100%;
border: 5px solid red;
padding: 15px;
/*margin: 20px;*/
box-sizing: border-box;
}
However you can not do the same with the margin, because the element is pushing itself from the body: it does what it supposes to do.
You can make a workaround by doing the same thing as above:
body
{
padding: 20px;
box-sizing: border-box;
}
You will use the padding on the body instead of the margin on the #box.
jsFiddle
Update
To prevent the double padding space, you should only apply it on the body element (or html, but i prefer the body as that is your visual element in the end).
这篇关于HTML CSS框有填充和边距和100％宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
