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

Question

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: ```

Text will be here

```

Accepted Answer

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 Box with padding and margin and 100% width?

Solution

Problem

Related problems