10

What is the CSS best practice when you want to give space to an element placed just after a first element.

Asume this html

<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>

Should you use this css

.a-block { margin-bottom: 10px; }

or

.another-block { margin-top: 10px; }

?

4
  • It doesn't matter. Just go with the one that fits your needs. Apr 5, 2015 at 15:36
  • agreed, however i'd vote for margin on the first element, well, it's sort of habit thing, it helps me for quicker debugging.
    – Stickers
    Apr 5, 2015 at 15:39
  • @sdcr why doest it help you for quicker debugging? Apr 7, 2015 at 8:29
  • @BenjaminBenoudis because i always know where the gap is from.
    – Stickers
    Apr 7, 2015 at 13:51

6 Answers 6

6

i would use :nth-child width margin-top

div:not(:first-child) {
  margin-top: 10px
}
<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>
<div class="another-block-1">ipsum</div>
<div class="another-block-2">ipsum</div>

1
  • 3
    I'm not talking about a specific case of a list of divs with same margin except for the first. I'm talking about a practice. Apr 7, 2015 at 8:25
5

In my opinion, margin-top in the second block is a better practice.

Indeed, the first div shouldn't take care about others divs since it was the first.

If the second is removed I shouldn't have to remember to remove margin-bottom from the first.

1
  • 1
    The sibling selector is your friend here. This would remove the need to have to remember to remove any CSS in this situation. 'div + div' will target the second element onwards and then you would apply a margin top to it. Apr 7, 2015 at 10:06
5

Using margin-top would eliminate the need of using a next sibling selector. It also removes the need of removing the bottom-margin from the last-child to avoid padding discrepancies when using text in panels or boxes.

4

Since nobody has mentioned it yet, I wanted to add that you could use both at once. This will cause them to meld together through a feature called margin collapsing. In certain situations this could as well be the best practice since you can use it to declare "this element need at least this much space below it". Note that margin collapsing may backfire on you if you accidentally use properties that disable it, such as floats, borders or flexbox.

.a-block {
  margin-bottom: 10px;
}

.another-block {
  margin-top: 10px;
}

div {
  background-color: #e0e0e0;
}

.float {
  float: left;
  clear: both;
  width: 100%;
}
<div class="a-block">Only 10px margin</div>
<div class="another-block">between these elements</div>
<hr />
<div class="a-block float">Double margin because</div>
<div class="another-block float">of the float</div>

1

It is completely up to the context in which the CSS is needed - is the short answer. It depends whether you need the first element pushed down as well as all the other elements. or you need the first element to be flush with the top of the parent but you need the bottom element to have a margin at the bottom.

The common sense thing to think is that the first element is already there so the second element will surely need to be "pushed" down, so the natural thing to do would be to add margin bottom to the previous element (at least that is the way that my brain works).

Current CSS browser support dictates that this is the preferred method. Due to the fact that, in CSS, there is a "next sibling" selector (~), an "adjacent element" selector (+) , and :first-child is more widely supported than :last-child is (purely because it is more difficult to implement in a browser than :first-child is). Namely this :last-child support issue is IE8 but this still affects us today when developing for certain clients.

There are no previous sibling selectors, so this makes me prefer the method of adding margins and paddings to the bottom of elements and not the top. Purely just to keep everything in my CSS to be using the same principal of "pushing things down from above or selecting the first element"

0

You should always be consistent on how you apply the styles.

For example, if you have a hero and think about the inside elements. For example, you have a title, optionally a button and optionally text below that. You can end up with having margins or padding that should not be there and were intended to have a button there.

Also, the point about collapsing margins is important when you have a design with different use cases. Padding doesn't collapse but if used improperly, can cause elements not to center 'properly'.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.