View Full Version : "inner" margin causes gap, WHY?

07-30-2012, 01:09 PM
I prepared this page to illustrate a problem: http://www.variablehtml.com/gap.htm , then I discovered how to fix the problem, but I’m still wondering WHY?

The gap is caused by the top margin of the buttons that are inside the division with the lower graphic background!
LI.button {
margin-left: 5px;

When I change the top margin to 0px, everything lines up properly.

If the button exists inside the division, why is the entire division moved down by the top margin of the button?


I’m in the process of converting my table designed layouts to pure CSS positioning. Along the way I’m finding problems and decided to create example pages to show everyone the issues. Would you rather I do this with code blocks? The blocks might be extremely large. The pages I create are going to be self contained, except for the graphics, which will have full links so you can display source and save to your own drive.

07-30-2012, 01:17 PM
It moves down to preserve the 3px margin assigned to the li element.

There's a few solutions:

- Apply 3px padding-top to .wnav
- Apply 3px padding-top to ul.button
- Remove the top margin on the li entirely
- Set the top margin on the first child li to 0:

ul.button li:first-child {
margin-top: 0;

EDIT: I'd recommend using lower case throughout your css, incidentally.

07-30-2012, 01:51 PM
I agree with the lower case, a lot of this was created long ago with an older program "Hot Metal Pro" which put all of its coding in upper case.

Need to take the time to lower case everything.

Thanks for the first-child hint. That will come in handy as I move forward.