...

View Full Version : Margins and paddings within lists .



CrashNsink
05-19-2012, 06:22 PM
If
li {
padding:1em;
}

am I correct to say that this 1em now refers to the gap between individual <li> items in the list and the border(which border is it if unspecified?)

what about if padding is changed to margin ? what's the difference ?

If the CSS code is
li {
margin:1em;
}

Excavator
05-19-2012, 06:30 PM
Hello CrashNsink,
If you picture the li as a box, padding is inside the box and margin is outside.
Either can appear to affect the gap between li's.


See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

CrashNsink
05-19-2012, 06:37 PM
Thanks for the link =)

For minimal disruption when adjusting the gap between each <li>, using padding seems to be the better choice ?

Excavator
05-19-2012, 07:07 PM
Thanks for the link =)

For minimal disruption when adjusting the gap between each <li>, using padding seems to be the better choice ?

I would use margin.

CrashNsink
05-20-2012, 03:17 PM
What's the reason ? Need to understand more about the box model..

Excavator
05-20-2012, 04:26 PM
What's the reason ? Need to understand more about the box model..

With margin being outside the box, adding margin moves things away from that box. Padding, being inside the box, makes the box bigger.

--------------
In the example below, both horizontal ul menus look very similar. Copy/paste that code into a new .html document and view it in your browser.

The top menu uses padding on the anchors and the bottom uses margin.

Now, to graphically illustrate the difference, add a background color to ul a:hover and try the menu again.

Now remove the background color from the anchors and put it on the li elements. Try adding a margin or padding to the li elements to see what happens when you do.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
#container {
width: 800px;
margin: 30px auto;
padding: 200px 0 300px;
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;
}
ul {
line-height: 40px;
margin: 0;
padding: 0;
text-align:center;
}
ul li {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
list-style: none;
background: #fff;
}
ul#padded li a {
margin: 0;
padding: 1px 20px;
display: block;
font-size: 17px;
font-weight: 300;
color: #333;
text-decoration: none;
}
ul#margined li a {
margin: 1px 20px;
padding: 0;
display: block;
font-size: 17px;
font-weight: 300;
color: #333;
text-decoration: none;
}
ul a:hover {color: #666666;}
</style>
</head>
<body>
<div id="container">
<ul id="padded">
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
</ul>
<ul id="margined">
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
</ul>
<!--end container--></div>
</body>
</html>

CrashNsink
05-21-2012, 07:00 AM
Wow, thanks for the sample code =)

I understood the 1st par, "add a background color to ul a:hover" , but I don't get the 2nd part.
"remove the background color from the anchors and put it on the li elements."
Why does the background color disappear from the li with margin used ?

Excavator
05-21-2012, 02:34 PM
Why does the background color disappear from the li with margin used ?

It doesn't, it just gets smaller because there is no padding included.

Maybe it would be more help visually to add background: 2px solid #f00; to the li as well as the background color, then play with the margin/padding again.

I'm sorry I'm not able to explain this better ... :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum