Go here and paste HTML code into the HTML pane and CSS code into the CSS pane to test and inspect the result.

HTML:

<div id="outer">
  <p>Some text</p>
  <div id="inner1">
    <p>Some text</p>
  </div>
  <div id="inner2">
    <p>Some text</p>
  </div>
  <div id="inner3">
    <p>Some text</p>
    <div id="inner3_inner">
      <p>Some text</p>
    </div>
  </div>
</div>

We can inspect the layout using borders.

CSS:

#outer {border: 5px solid red;}
#inner1 {border: 5px solid darkgreen;}
#inner2 {border: 5px solid blue;}
#inner3 {border: 5px solid orange;}
#inner3_inner {border: 5px solid purple;}

Borders affect the layout as they have thickness; better is to use background colors for now:

CSS:

#outer {background-color: red;}
#inner1 {background-color: darkgreen;}
#inner2 {background-color: blue;}
#inner3 {background-color: orange;}
#inner3_inner {background-color: purple;}

Now lets add some padding:

CSS:

div {padding: 5px 15px 50px 100px;}

And some margins:

CSS:

div {margin: 5px 15px 50px 100px;}

Note how all divs are affected.

Block inheritance

First, we need to set all elements to receive no padding or margin.  Then we can set padding and margin for individual elements:

CSS:

* {padding: 0; margin: 0;}

#outer {
  margin: 10px;
  padding: 12px;
  border: 2px dotted #B7B2CF;
}
#inner1 {
  background-color: #B2C3CF;
  margin: 20px;
  padding: 30px;
  border: 1px solid black;
}
#inner2 {
  margin: 20px;
  padding: 10px;
}
#inner3 {
  margin: 5px;
  padding: 10px;
  border: 2px #008000 dashed;
}
#inner3_inner {
  margin: 10px;
  padding: 8px;
  border: solid blue 1px;
  background-color: #CFC9B2;
}

Example

We typically set border clearance padding on <divs> closest to the actual <p> elements.  We set margins for spacing between divs.  For a blog page containing multiple articles we can use a horizontal line to separate one article from the next using margin and padding like so:

HTML:

<div id="content">
  <div class="article">
    <p>Some text</p>
  </div>
  <div class="article">
    <p>Some text</p>
  </div>
  <div class="article">
    <p>Some text</p>
  </div>
</div>

CSS:

#content {
  padding-left: 5px;
  padding-top: 5px;
  padding-right: 5px;
}

#content .article {
  padding-bottom: 30px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
}

Calculating exactly where an element will appear on screen

For non-fixed width layouts – in particular responsive design layouts- you will use relative positioning rather than absolute positioning.  Text will wrap and images will auto-scale to the space available to them.  You will have to be careful using padding and margin and test the effect they have on page content using different screen sizes.  Typically these designs feature:

• no “width=500px” for divs; either percentages or min-width values are used.
• “min-width” for scalable images.
• “@media all and (max-width: 840px) {…}” media queries to change float:left or display:table to display:block to stack content in a single column on smaller screen devices.
• “min-width” for the smallest common content container div and/or forms to ensure a minimum content width.
• “max width” and “margin:0 auto” for the top level container div to ensure a maximum content width.  Content will be centered on the page and will stretch to a set maximum width.  The body background (image) will become visible to the left and right of the centered content container div.

Padding and margin values for content (divs containing text) are typically small values (5px to 50px or so); to improve scaling for small screen devices it is recommended to make these padding and margin values relative to the available page width using percentage values (1% to 5% or so).

Padding/margin for layout (divs containing divs) is typically used to accurately (relatively) position child div elements respective to the parent div (where the parent div uses a “background: url (…);” backdrop image.