0

I'm trying to use CSS/margin-top to add some extra vertical space before H3 headings, but it has absolutely no effect. Any suggestions will be appreciated. The relevant CSS is the following:

h3{
  color:blue;
  text-align:left;
  font-size:26px;
  font-weight:bold;
  margin-top:24px <!-- Add vertical space: -->
}

The URL of the document is as follows: http://phillipmfeldman.org/English/index.html

Kara
  • 6,115
  • 16
  • 50
  • 57
Phillip M. Feldman
  • 468
  • 1
  • 7
  • 17

4 Answers4

1

I just went onto the website, opened debugging chrome tools, found an H3 header, deleted <!-- Add vertical space: --> from the H3 css, and it worked perfectly... Not sure what could be wrong here.

Jlewis071
  • 175
  • 5
1

Your CSS margin-top rule is not being used because CSS comment structure is different. <!-- some comment--> is considered as invalid value for the rule. Use the below instead.

h3{
  color:blue;
  text-align:left;
  font-size:26px;
  font-weight:bold;
  margin-top:24px;/*Add vertical space*/
}

Also, always remember to add a semi-colon at the end as mauzy_broadway has pointed out.

Harry
  • 87,580
  • 25
  • 202
  • 214
  • Technically, the construct `` makes the value in a declaration invalid, and by [CSS error handling rules](http://www.w3.org/TR/CSS2/syndata.html#parsing-errors), browsers must ignore the *declaration* (for `margin-top`), not the entire rule (for `h3`). – Jukka K. Korpela Aug 11 '13 at 06:18
  • Agreed @JukkaK.Korpela. As long as the semi-colon was present at the end, the `margin-top` would (or should) have also worked. But without it, the comment part is also considered as a part of the value :( – Harry Aug 11 '13 at 06:28
1

The reason it isn't working it's because you're using an HTML comment instead of a CSS one, that's like /* comment here */.

Remove the comment and the rule should apply just fine.

Elias Dorneles
  • 22,556
  • 11
  • 85
  • 107
1

Add a semicolon after the 24px, the comment is throwing it off.

mauzy_broadway
  • 503
  • 1
  • 4
  • 7