What are the best ways to deal with different bottom margins?

[iamacatperson]

Let’s say that you have a general margin style for your elements like so:

h1, h2, h3, h4, p, .box-1  { margin-bottom: 30px; }

However, there would be instances where in your design requires them to have a different bottom margin. Let’s say, sometimes, your h2 element comes with a subheader h3 and you like h3 to be directly below h2 without any space.

What is the best way to approach this? Is it better to have a pre-set classes of different margins or do you usually tag that element with a new class with a semantic name?

For instance:

<h1 class="min-margin">Header 1</h1>
<h2>Header 2</h2>

OR

<h1 class="header-special">Header 1</h1>
<h2>Header 2</h2>

The advantage of using “header-special” is that in case I want to add more styles to such header, I can use the same class name. The advantage of using “min-margin” is that I can apply it to any element that requires a lesser margin than normal.

I guess, this boils down to whether a modular approach would be better in this case. Any thoughts?

[Paulie_D]

Is it better to have a pre-set classes of different margins

I dislike creating classes ‘just in case’.

or do you usually tag that element with a new class with a semantic name?

I’m more likely to target that specific h1/h2 based on it’s parent selector element or class

main h1 {
margin-bottom:0;
}

for instance.

If I find myself using that structure more than once then I would consider making a special class.

[wolfcry911]

I wouldn’t change the bottom margin at all. I’d move the h2 (or h3) up using a negative margin only when it follows the h1 (or h2).

h1 + h2, h2 + h3 {
  margin-top: -20px;
  }

[PicnicTutorials]

If it happens more than say 5 times in more than one page and I think maybe more then ill prob just give it a class. If it happens sparaticaly and not very often then I usually just target it with css3 (:nth-child stuff) or old school like #id p span {…}

[Tom Houy]

Why not just use an Adjacent Sibling Combinator? You could specify a unique margin on the H2 for any instances where it comes directly after an H1, without the need to add custom class markup to the HTML itself.

Something like:

h1 + h2 {
margin-top: 5px;
}

[Author]

Posts