Home/ Questions/Q 51891
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T16:49:17+00:00

When you want to add whitespace between HTML elements (using CSS), to which element

  • 0

When you want to add whitespace between HTML elements (using CSS), to which element do you attach it?

I’m regularly in situations along these lines:

<body>   <h1>This is the heading</h1>   <p>This is a paragraph</p>   <h1>Here's another heading</h1>   <div>This is a footer</div> </body>

Now, say I wanted 1em of space between each of these elements, but none above the first h1 or below the last div. To which elements would I attach it?

Obviously, there’s no real technical difference between this:

h1, p { margin-bottom: 1em; }

…and this…

div { margin-top: 1em; } p { margin-top: 1em; margin-bottom: 1em }

What I’m interested is secondary factors:

  1. Consistency
  2. Applicability to all situations
  3. Ease / Simplicity
  4. Ease of making changes

For example: in this particular scenario, I’d say that the first solution is better than the second, as it’s simpler; you’re only attaching a margin-bottom to two elements in a single property definition. However, I’m looking for a more general-purpose solution. Every time I do CSS work, I get the feeling that there’s a good rule of thumb to apply… but I’m not sure what it is. Does anyone have a good argument?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I tend to use a bottom margin on elements when I want them to have space before the next element, and then to use a ‘.last’ class in the css to remove the margin from the last element.

    <body>   <h1>This is the heading</h1>   <p>This is a paragraph</p>   <h1>Here's another heading</h1>   <div class='last'>This is a footer</div> </body> 
    div { margin-bottom: 1em; } p { margin-bottom: 1em; } h1 { margin-bottom: 1em; } .last {margin-bottom: 0; }

    In your example though, this probably isn’t that applicable, as a footer div would most likely have it’s own class and specific styling. Still the ‘.last’ approach I used works for me when I have several identical elements one after the other (paragraphs and what-not). Of course, I cherry-picked the technique from the ‘Elements’ CSS framework.

    • 0