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!

Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
Olly F
  • 2,729
  • 9
  • 31
  • 35

2 Answers2

2

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.

Community
  • 1
  • 1
Andrew
  • 2,770
  • 1
  • 22
  • 29
2

Firstly older versions of browsers do not support pseudo selectors. Secondly You are using margin-bottom on an inline Element. Margin-bottom is a property of block elements.

a:first-child{display:block;margin-bottom:12px;}

will work.

geekman
  • 2,224
  • 13
  • 17