带有填充和边距以及100％宽度的HTMLCSSBox？-HTMLCSSBoxwithpaddingandmarginand100%width?

29  

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会扩展。您可以使这些属性插入,因此它不会扩展您的元素。你可以用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.

您将使用正文上的填充而不是#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).

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

2  

According to w3c specs for Box Model

根据Box模型的w3c规范

The rendered width of a box type element is equal to the sum of its width, left/right border and left/right padding.

框类型元素的渲染宽度等于其宽度,左/右边框和左/右填充的总和。

So that means the values of padding and border-width affects the total width of the element. So here you are adding the 15px of the padding along with 5px of borders with 100% of actual width of the element.

这意味着填充和边框宽度的值会影响元素的总宽度。所以在这里你要添加15px的填充以及5px的边框和100%的元素实际宽度。

So overall it exceed the widow size that's why it comes with horizontal scroll.

总的来说它超过了寡妇的大小,这就是为什么它带有水平滚动。

2  

You should use CSS box-sizing property:

你应该使用CSS box-sizing属性:

#box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
}

But please note that you will need to use zero margin for this to work.

但请注意,您需要使用零保证金才能生效。

There is a good explanatory article on how this works: http://css-tricks.com/box-sizing/

关于它如何工作有一个很好的解释性文章:http://css-tricks.com/box-sizing/

With CSS3, you can replace border with inset border-shadow and margin with transparent border. This way you will have control of all of these parameters: padding, (fake) margin and border:

使用CSS3,您可以使用透明边框替换带有插入边框阴影和边距的边框。这样你就可以控制所有这些参数:填充,(假)边距和边框:

#box {
    width: 100%;
    height: 100%;
    padding: 15px;
    border:20px solid transparent;
    box-sizing:border-box;
    -webkit-box-shadow: inset 0px 0px 0px 5px #f00;
    box-shadow: inset 0px 0px 0px 5px #f00; 
    -moz-box-sizing:border-box;
}

See a live fiddle here: http://jsfiddle.net/HXR3r/

在这里看一个现场小提琴:http://jsfiddle.net/HXR3r/

1  

You can use css calc()

你可以使用css calc()

#box {
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
        width: calc(100% - 80px);
        height: calc(100% - 80px);
    }

0  

fiddle

Your problem is, which you dint noticed, Assuming just for heights

你的问题是,你注意到的,假设只是为了高峰

height:100%;
border: 5px solid red;
padding: 15px;
margin: 20px;

This makes height = 100% + border (2 x 5) + padding (2 x 15) + margin (2 x 20) = 100% + (10+30+40) px

这使得高度= 100%+边界(2 x 5)+填充(2 x 15)+边距(2 x 20)= 100%+(10 + 30 + 40)px

which is more than 100%...hence no fit block in body area..Try reducing with height in percentage for better result!!

Similar is case for the widths!!

这超过100%...因此在身体区域没有适合的块。尝试减少高度百分比,以获得更好的结果!类似于宽度的情况!!

0  

You need to add Add box-sizing: border-box; property in your #box And remove margin: 20px;

您需要添加Add box-sizing:border-box; #box中的属性并删除保证金:20px;

Here is the updated CSS:

这是更新的CSS:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
#box {
    width: 100%;
    height: 100%;
    border: 5px solid red;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

working fiddle