Menu
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?
367
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>
Like this
DEMO
CSS
.div1{
background-color:blue;
float:left;
}
h3{
margin:0;
padding:0;
background:green;
}
DEMO1
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
