Maybe the red box confuses you. Try this instead. A page filled with text and just two yellow boxes, no outer box.
QUOTE
<!DOCTYPE html>
<html>
<head>
<title>Margin/padding</title>
<style type="text/css">
.box { background: yellow;
float: left;
border: 2px solid black }
#margin { margin: 5em }
#padding { padding: 5em }
</style>
</head>
<body>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<div class="box" id="padding">Padding</div>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<div class="box" id="margin">Margin</div>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
<p>
The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p>
<p>
The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p>
</body>
</html>
Click to view attachment See? Padding creates space inside the box and margin outside.