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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Confused about margins

    Hi,

    I have a really dumb question. Given the following css and html:

    <style>
    li {margin: 5px;}
    </style>
    <ul>
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
    </ul>

    What is the margin between item1 and item2? 5px or 10px?

    Seems to me item1 has a margin-bottom of 5px and item2 has a margin-top of 5px, that should add up. Do I completely misunderstand how margins work?

    TIA
    Last edited by mattshiao; 08-14-2010 at 07:15 PM. Reason: typo

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    The specs say that margins should collapse between adjacent elements - so in this case the margin should be 5px.

    This is a good explanation.

  • #3
    Regular Coder jdswebservice's Avatar
    Join Date
    Aug 2010
    Location
    Moon Township, PA
    Posts
    107
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Also don't forget when you are using:

    Code:
    #something {
    margin: 5px;
    }
    You are saying you want 5px on ALL sides of that element. so you have 5px on the top, left, bottom, and right places of that element.

    J-


  •  

    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
    •