HTML CSS Box with padding and margin and 100% width?

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).

According to w3c specs for Box Model

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.

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

You should use CSS box-sizing property:

#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/

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:

#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/

You can use css calc()

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

NoobEditor

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

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

UID

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

Here is the updated 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

来源：https://stackoverflow.com/questions/20377482/html-css-box-with-padding-and-margin-and-100-width

标签

html

css

border

margin

padding