Need Better Understanding of Margin vs Padding - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

Vance · 10-21-2008, 01:44 PM

I am playing with a new project and I thought I had a pretty good handle on moving text around.

Anyway, with this new project, for some reason I can't get the content text to move to the left a bit. From the pic below, you can see what I have to start with.

What I would like to have is something like the pic below:

The content text will go under <div id="mid">. I have tried Margin-Left: XXpx;
and I have tried padding-left: XXpx; and neither seem to want to move the text to the left.

I have done some reading up on the both and they seem to do the same thing. Maybe my old brain just isn't getting it, but I would appreicate it if someone could maybe explain the difference between the two (if there is any) and when to use Margin vs Padding.

Anyway, my code thus far is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="robots" content="all">
<meta name="rating" content="general">
<style type="text/css">
body
{
background-color:#000;
margin:0;
padding:0;
}
#container {
width:973px;
margin:0 auto;
height:900px;
}
#header {
background-image:url('../images/header1.jpg');
background-repeat: no-repeat;
width:973px;
height: 264px;
}
#header2 {
background-image:url('../images/header2.jpg');
background-repeat: no-repeat;
width:973px;
height: 59px;
}
#left {
padding-top: 3.0em;
background-color: #FFF;
float:left;
height:600px;
width:197px;
}
#mid {
background-image:url('../images/mid.jpg');
background-repeat:repeat;
color: #FFF;
padding-top: 2em;
margin-left: 175px;
width: 775px;
height: 600px;
margin:0;
float:left;
}
#fill {
background-image:url('../images/fill.jpg');
background-repeat: repeat;
width: 973px;
height:550px;
}
#foot {
background-image:url('../images/foot.jpg');
color: #FFF;
width: 973px;
height: 41px;
}
div.menu {
width:185px;
padding: 0.9px;
margin-top: 0.7em;
margin-left:0.5em;
border:0px;
text-align:left;
}
div.menu a {
display:block;
font-size:20px;
width:100%;
padding: 0.30em;
margin-left: 0.3em;
font-weight:bold;
border-top:1px ;
color: rgb(109,85,165);
text-decoration:none;
line-height:25px;
}
html>body div.menu a {width:auto;}
div.menu a:hover {
color: #000;
font-size:20px;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<div id="container" />
<div id="header">
</div>
<div id="header2">
<div id="left">
<div class="menu">
<a href="..">Home</a>
<a href="..">Archives</a>
<a href="..">Junk</a>
<a href="..">Junk</a>
<a href="..">TBD</a>
<a href="..">TBD</a>
<a href="..">TBD</a>
<a href="..">Contact Us</a>
</div>
</div>
<div id="mid">

<p>This is a test to see if this things work</p>
</div>
<div id="foot">
</div>
</body>
</html>

Thanks for any help,
Vance

WaterFleur · 10-21-2008, 04:01 PM

Padding is on the inside.

Border is in the middle.

Margin is on the outside.

That's the distinction, turn on the border:

div {
border : 1px solid #ff0000;
}

When items are inside other items, the margin and padding can get confused.

To see that confusion (yes it is a browser problem) turn on background-colors but make them different, and you should be able to see where it breaks.

fnacotton · 10-22-2008, 08:54 PM

Here is a piece of advice that I picked up along the way. Browsers handle padding differently. If you have a div, and you set padding to 10px on the div, in most browsers that 10px is applied inside the div. So if the div is 500px wide and you set the padding to 10px, then your content will take up 480px of width in that div. But in IE6, that 10px of padding is added to the 500px, so you end up with a div that is 520px wide. This is why I never add padding onto a div. I create a seperate class called inner for the padding.

Code:

#myDiv {width: 500px; height: 300px; padding: 0; margin: 0;}
#myDiv .inner {padding: 15px;}

so then my html looks like
<div id="myDiv">
<div class="inner">
   all your content 
</div><!--inner-->
</div><!--myDiv-->

So to move the text over a bit from the left edge, and no where else your padding would look like:

Code:

.inner {padding: 0 0 0 10px}

You probably already know your shorthand for padding, but I did a post on shorthand that could help out if you need it.

tukang · 10-25-2008, 03:55 AM

When you want to arrange the space between the cell (div) you have to use margin (outside). But if you want to arrange the space inside the cell, you have to use padding.