Padding and Margin?

[hitman]

I'm having some trouble understand padding and margin.

I want to make a layout that looks like the attachement: a container with a white background; then 4px away from the container's borders, an inner div that has a 1px border; and 10px away from the inner div's borders, the content of the website.

When I'm playing with margin and padding, it either makes the container wider or makes the right part of the inner to go past the container's border.

Could you guide me through the right direction?

[gizmo]

Do a search for 'box model' since a diagram will give you a better picture (no pun intended).

[KDLA]

When I'm playing with margin and padding, it either makes the container wider or makes the right part of the inner to go past the container's border.

- Make sure you have the correct and a complete DOCTYPE
- You'll need to use nested divs, because you want white between the background and the border

<div style="width: 400px; padding: 4px; background: #fff; text-align: center;">
<div style="width: 392px; border: 1px solid #444; padding: 10px; margin: 0 auto;">
<p>text text text</p>
</div>
</div>

KDLA

[Centauri]

Setting a width and auto side margins on the inner div is not necessary, as the outer divs padding will determine the placement and size of the inner div :

<div style="width: 400px; padding: 4px; background-color: #FFFFFF;">
<div style="border: 1px solid #444444; padding: 10px;">
<p>text text text</p>
</div>
</div>

[hitman]

Setting a width and auto side margins on the inner div is not necessary, as the outer divs padding will determine the placement and size of the inner div :

<div style="width: 400px; padding: 4px; background-color: #FFFFFF;">
<div style="border: 1px solid #444444; padding: 10px;">
<p>text text text</p>
</div>
</div>

The 400px div stretches to 408px, that's the same problem I had before. Is there a way to keep it 400px and still have the 4px padding?

[Centauri]

The width setting on anything is the internal width (available to contents), and padding and borders are added to this. If you want 4px padding and the external width to be 400px, then just set the width to 392px.

[hitman]

Alright. Simple as that

Thanks a lot for your help!