Remove top margin from first child via CSS3
April 15, 2015
Description
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 Statewidetraining.org! 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>Before
Too much space above h2 (See red lines).
After
That’s better.
Explanation
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!