带有填充和边距以及100%宽度的HTML CSS Box？

Question

带有填充和边距以及100%宽度的HTML CSS Box？

xer*_*ool 11 html css border margin padding

我有一个#box宽度为100%的盒子,高度:100%,填充:5px,边距:5px; 边界:5px;

我需要在HTML5布局中正确显示它.

现在我有:

在此输入图像描述

但我需要在身体区域适合阻滞.

码:

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

nkm*_*mol 33

浏览器确实告诉他要做的事情:)但是我认为你不喜欢溢出它.

会发生什么,#box因为你的边框和填充你的扩展.您可以使这些属性插入,因此它不会扩展您的元素.你可以这样做box-sizing:

 #box {
     width: 100%;
     height: 100%;
     border: 5px solid red;
     padding: 15px;
     /*margin: 20px;*/
     box-sizing: border-box;
 }

Run Code Online (Sandbox Code Playgroud)

但是你不能margin对它做同样的事情,因为元素正在从身体中推动自己:它做了它想做的事情.

您可以通过执行与上面相同的操作来制定解决方法:

body
{
    padding: 20px;
    box-sizing: border-box;
}

Run Code Online (Sandbox Code Playgroud)

您将使用身体上的填充而不是边缘上的边距#box.

的jsfiddle

更新

为了防止双填充空间,你应该只将它应用于body元素(或html,但我更喜欢body,因为它最终是你的视觉元素).

归档时间：	11 年，9 月前
查看次数：	23559 次
最近记录：	8 年，3 月前