Forums

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

Home Forums CSS adding a margin between two buttons with same class

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #188004
    ErraticFox
    Participant

    Is there a way to add a margin between two buttons that have the same class without adding the margin to both buttons, but without having to create two separate classes?

    Because I’m wanting to add margin-bottom, but if I do, then the last button will have a bottom margin that would be useless. It’s kind of hard to explain, here’s my CodePen example: http://codepen.io/ErraticFox/pen/pvzxoV

    I remember there being a way to do it, but I can’t remember what it’s called.

    #188005
    shaneisme
    Participant

    Sure, you can do that a few ways.

    You can, of course, add another class to the button, so it can be .button .first, and add the margin to that selector… that’s pretty limiting.

    You can use pseudo-selectors like :first-child, but it has the same limitations.

    If you did something like .button + .button, any time a .button was a sibling to another .button, you’d give it a margin.

    .button + .button { margin-top: 5px }

    or whatever…

    #188035
    mikroBrake
    Participant

    You could try it with
    .button:first-of-type{margin-bottom:5px;}

    #188037
    Paulie_D
    Member

    I assume your top button will have some top margin to push it away from whatever is above it.

    Just add that to both…won’t that fix it?

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