Home/ Questions/Q 8590117
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:13:15+00:00

The first-child pseudo-class selector doesn’t seem to be having any effect. Here’s the CSS,

  • 0

The first-child pseudo-class selector doesn’t seem to be having any effect. Here’s the CSS, followed by HTML:

.social-block a:first-child {
     margin-bottom: 20px;
 }

 <div class="social-block">
      <a href="#" target="_blank"><img src="stylesheets/img/socialblock-facebook.png" alt="socialblock-facebook" width="300" height="125"></a>
      <a href="#" target="_blank"><img src="stylesheets/img/socialblock-twitter.png" alt="socialblock-twitter" width="300" height="125"></a>
 </div>

Can’t tell where I’m going wrong!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Top and bottom margins are not applied to inline elements. See similar question: Margin top in inline element.

    To give <a> a bottom margin, you could try making it a block level element using display: block. However, that will push the second link onto the next line, so you may have to incorporate additional techniques (e.g. float) to make the two links appear side-by-side.

    More on inline elements: http://www.maxdesign.com.au/articles/inline/

    By the way, the :first-child pseudo-class is not fully supported in IE 8.0 or earlier. See CSS contents and browser compatibility.

    • 0