Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Where to put paddings/margins

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #44321
    Martin_Muzatko
    Participant

    #Hi there!

    I would like to ask you a question how you space elements around.

    Example:
    If I wan’t my page to be a bit spaced from top, for lets say about 20 Pixels, 1.5em or whatever floats your boat.
    Will I assign a padding-bottom to my body or margin-top my section.page element?

    In this case it sounds better and more clear to put the margin on the page section.
    Maybe this is also more clear to understand for other developers working on the same project, when they try to find out where some padding/margin comes from.

    Based on that I can create a “rule” saying: inner elements before outer.

    What do you think about this?
    Do you have another idea of this and got your own rules?

    Please let me know :)

    #132903
    Kitty Giraudel
    Participant

    Whenever I can, I try to avoid top and left margin. They are “counter-flow”.

    #132908
    Paulie_D
    Member

    I prefer adding top margin to my top element.

    Not sure how padding on the body interacts with `box-sizing:border-box`

    #132913
    CrocoDillon
    Participant

    General rule: margin for spacing between elements, padding for spacing between an element and it contents.

    I don’t agree with “inner elements before outer”, it depends on what you’re trying to achieve. For example you may have some container element your’re using on many pages (`

    ` in my case), but you want an edge around the containers content (which can be one or more elements, depending on page). If you want the edge to be the same no matter what, padding is the right choice. It’s more consistent and prevents you from needing to specify margin on every possible child element. If you want more flexibility you should go for padding or margin on the child elements.

    Even if you don’t use backgrounds on those elements, it makes the choice between margin or padding sometimes more obvious if you think about how a background on an element would behave, maybe even add a background color just for prototyping.

    #133011
    darrylm
    Member

    I try to avoid margins and use padding as much as possible to avoid issues such as this one I had before

    https://css-tricks.com/forums/discussion/22100/unwanted-top-margin-in-firefox#Item_14

    I also found if your background is a solid colour that borders can do an effective job

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.