1

How can I detect if elements are displayed in a row, or if there's a line break and then apply additional styling?

In this case both buttons fit in one row:

<div style="width: 200px">
  <button>small</button>
  <button>small</button>
</div>

In this case they display above each other:

<div style="width: 200px">
  <button>very very very long element</button>
  <button>small</button>
</div>

And in this case I'd like to automagically add margin-bottom: 16px to the first button (or margin-top to the second one - doesn't matter).

Benjamin M
  • 23,599
  • 32
  • 121
  • 201
  • Given CSS is not a programming language, you'll need a script if to _detect_ it. – Asons Jun 16 '19 at 11:59
  • A common trick to achieve a margin in such cases is to give both `button`s a `margin-top`, and then using an extra wrapper, give that wrapper a negative `margin-top` with the same value. With that it will _behave_ in the way it appears you want. – Asons Jun 16 '19 at 12:02
  • Or simplest possible, just add a `margin-bottom` to both, and when they break line the first will push the second down. If you have an issue with the extra margin at the bottom of the wrapper, go with my first option, or try with a negative bottom padding on the existing wrapper. – Asons Jun 16 '19 at 12:11
  • Thank you for the ideas. If you write them with a small example as an "answer", I could mark it as accepted :) – Benjamin M Jun 16 '19 at 12:13
  • 1
    It has been answered several time before, so I closed it as a dupe with some good samples, where the accepted one in the first link is mine, explaining what I just commented...feel free to upvote there, if you find it useful – Asons Jun 16 '19 at 12:34

0 Answers0