Boone Putney bio photo

Boone Putney

Software Development
Random Musings
Austin, Texas

HumanPlanet Soleer

Email LinkedIn Github


Content management systems are great for allowing end-user editing of content, but they also introduce a lot of variables into the system. One of those unknowns is the element type for the first element in a content area. This is generally not an issue, but with certain border and background appearances, the variablility can cause alignment issues.

The easiest course of action is to remove the top margin from the first element of the content area, regardless of what type it is. Here is how you can accomplish that via css:

CSS Code

1 article.main-post-content>*:first-child{
2   margin-top: 0 !important;
3 }

Target HTML

Below is the html for area we’re targetting:

1 <article class="main-post-content">
2   <h2>Welcome to! We are Your Platform for Professional Development. Here you can register for a variety of training  events and conferences as well as gain access to many useful resources.</h2>
3   <p>We offer a variety of Prevention trainings through Prevention Training Services, HIV-related trainings through the Texas HIV Connection, and Workplace Wellness Professional Development trainings through Alliance Work Partners.</p>
4   ...
5 </article>


Too much space above h2 (See red lines).

First Element spacing before CSS


That’s better.

First Element spacing after CSS


Using the child combinator (>) selector in combination with :first-child targets only the very first element of the direct children, regardless of that child’s element type. It should also works on all modern browsers!