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
  • #188004

    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:

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


    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…


    You could try it with


    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.