CODEWITHSUNDEEP
htmlcss
Thomas
Thomas

Reputation: 4330

H3 is taking more space than enclosing div

I have a web page like this.

<html>
<head></head>
<body>
    <div style="background:blue">
        <h3 style="background:green">Hello world.</h3>
    </div>
</body>
</html>

When I analyze the output in chrome, it seems that the h3 tag is taking more space than the div tag. I want the div tag to completely include the h3 tag, and the background color of div to be shown in the entire area. Any idea how to do this?

Upvotes: 2

Views: 1841

Answers (8)

muhammad asif
muhammad asif

Reputation: 11

I solved this issue by increasing the line height of h3.

Upvotes: 0

Ganesh Hegde
Ganesh Hegde

Reputation: 227

set margin of h3 to 0.This will solve the problem.

Upvotes: 2

Leo T Abraham
Leo T Abraham

Reputation: 2437

<h3 style="background:green;margin:0;">Hello world.</h3>

By default h3 has a margin associated with it. So you have to add a margin:0 to the h3 tag.

DEMO

Upvotes: 2

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

DEMO

CSS

.div1{
    background-color:blue;
    float:left;
}
h3{
    margin:0;
    padding:0;
    background:green;

}

DEMO1

Upvotes: 3

squarephoenix
squarephoenix

Reputation: 1003

Most simple solution I see, add overflow: hidden; to the enclosing div.

Upvotes: 2

chris
chris

Reputation: 4867

Taken a css reset? This set all to default values.

http://meyerweb.com/eric/tools/css/reset/

Upvotes: 2

Patsy Issa
Patsy Issa

Reputation: 11303

The reason this is happening is that some elements have browser styling by default, that is why you should always use a css reset:

if you float the div it will wrap around the element, and set the margin of the h3 to 0.

<div style="background:blue;float:left;">
   <h3 style="background:green;margin:0;">Hello world.</h3>
</div>

fiddle

For the div to take the entire screen's size remove the float.

<div style="background:blue;">
 <h3 style="background:green;margin:0;">Hello world.</h3>
</div>

Upvotes: 3

CaribouCode
CaribouCode

Reputation: 14428

Set a font-size and line-height on the h3 like so:

h3 { 
  font-size: 16px;
  line-height: 1em; }

Upvotes: 2

Related Questions