CODEWITHSUNDEEP
htmlcss
Fergus Duniho
Fergus Duniho

Reputation: 1

How do I remove empty space between an enclosed header and a box border?

HTML

<ASIDE><H2>Sample H2</H2>
Sample content.
</ASIDE>

CSS

ASIDE {border: darkkhaki solid medium;}
ASIDE H2 {background-color: darkkhaki;}

I want this to display as a box with the heading in a thick bar at the very top of the box that matches the color of the box's border, but what I get instead is a gap of whitespace between the H2 and the top border of the box. I have checked this in multiple browsers, and it is the same. So, this is standard behavior, not the quirk of a particular browser. What can I do to remove the gap of whitespace that appears between the H2 and the top border?

Here is a jsfiddle link.

Upvotes: 0

Views: 66

Answers (2)

Hunter Turner
Hunter Turner

Reputation: 6894

Add margin-top: 0; to your ASIDE H2 div to remove the gap.

CSS

ASIDE H2 {
  background-color: darkkhaki;
  margin-top: 0;
}

JSFiddle

Upvotes: 4

Grizzly
Grizzly

Reputation: 5943

This seems to be a margin issue.

The fix is very simple. Just add a margin-top: 0 to your ASIDE H2 in your CSS.

HTML:

<ASIDE><H2>Sample H2</H2>
Sample content.
</ASIDE>

CSS:

ASIDE {border: darkkhaki solid medium;}
ASIDE H2 {background-color: darkkhaki; margin-top: 0;}

JSFiddle

Upvotes: 3

Related Questions