Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2012
    Location
    Under your bed.
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question Margins and paddings within lists .

    If
    Code:
    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
    Code:
    li {
    margin:1em;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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. 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Apr 2012
    Location
    Under your bed.
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks for the link =)

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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by CrashNsink View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Apr 2012
    Location
    Under your bed.
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts
    What's the reason ? Need to understand more about the box model..

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by CrashNsink View Post
    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.

    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    CrashNsink (05-21-2012)

  • #7
    New Coder
    Join Date
    Apr 2012
    Location
    Under your bed.
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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 ?

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by CrashNsink View Post
    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 ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •