13

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:

enter image description here

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>
xercool
  • 4,179
  • 6
  • 27
  • 33
  • 1
    I see in the answers, box-sizing is now all the rage. Be careful about using that if you do as there are issues with it (http://caniuse.com/#feat=css3-boxsizing) and most people don't use it in their examples. – Rob Dec 04 '13 at 14:31

6 Answers6

34

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

Community
  • 1
  • 1
nkmol
  • 8,025
  • 3
  • 30
  • 51
  • 1
    +1 for thorough explanation. You could also use `calc()` as an alternative btw: http://jsfiddle.net/fRFGk/3/ – xec Dec 04 '13 at 14:23
3

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.

Sachin
  • 40,216
  • 7
  • 90
  • 102
2

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/

keaukraine
  • 5,315
  • 29
  • 54
  • This is probably as close as you'll get, but it does not account for the margin (**border**-box). – xec Dec 04 '13 at 14:14
1

You can use css calc()

#box {
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
        width: calc(100% - 80px);
        height: calc(100% - 80px);
    }
Saragoça
  • 11
  • 1
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

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

RevanthKrishnaKumar V.
  • 1,855
  • 1
  • 21
  • 34
NoobEditor
  • 15,563
  • 19
  • 81
  • 112
0

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

dandan78
  • 13,328
  • 13
  • 64
  • 78
UID
  • 4,434
  • 11
  • 45
  • 75