SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Padding or margin

    If i want to space elements from each other - i am not sure when to use what in every situation. An example:

    I want to add some space between these elements.

    <img>
    <h2>

    h2 {
    padding-top: 40px; ???
    margin-top:40px; ???
    }

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I'd go with a margin for this case but there's no hard and fast rules about it.

    The differences are that margins are never visible and that they can collapse into each other.
    Padding sits inside the background and borders so is a visible part of the element.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ingenting View Post
    I want to add some space between these elements.

    <img>
    <h2>
    I'd say margins there, which is really for pushing elements apart. But I'd also advise against having inline elements butting up against block elements. I find it's a recipe for layout problems, even if the image is set to display: block.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    i am not sure when to use what in every situation
    That's because there is not a simple answer I'm afraid The answer varies depending on the situation

    Vertical margins will collapse between certain elements so their effect will be dependent on what went before and what follows after and what type of element it is and what properties it has been assigned.

    If you use a top margin on an element that clears a float then it will appear to have no effect because the top margin will already be automatically changed so that it clears the float as margins of static elements stretch under the float and reach the top of the original containing block as though the float was not there. In this case padding top on the cleared element would provide you with the extra space required or indeed applying a bottom margin to the float above.

    Vertical margins of certain elements do not collapse however so if you are using floats or inline-block elements then their margins are fully applied without collapsing

    Inline elements do not apply vertical margins so they are no use and although vertical padding has an effect on the inline element it will not affect the line-height of the element and thus not change the flow and will just spread out over what is in the way.

    As a general rule for static elements using margin is the preferred method to make space but you do need to take into account margin-collapse, although in most cases that is what you want.


Bookmarks

Posting Permissions

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