Applying a border to a div increases its height
I have a very simple page containing only a paragraph inside a division like below
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Floating</title>
<link rel="stylesheet" type="text/css" href="block.css">
</head>
<body>
<div id="parent">
<p>Floating </p>
</div>
</body>
</html>
The css is also pretty simple
#parent {
border: 1px solid #f00;
background-color: #ff9;
max-width:1000px;
}
p {
background-color: #f00;
}
The question is that the border is applied for the parent div's 82px height as shown in the chrome dev tools. But as soon as I turn off the border, the height is reduced to 50px. I just don't understand why the application of only 1px borders is causing this big difference in height?
Thanks in advance!
source to share
This behavior is part of the CSS2 Box Model and is called collapsing boxes. In different situations, the parent / child relationship is involved, the fields of the two elements are combined into the largest of the two. This is true as long as there is no other content or border between them.
The parent border prevents fields from collapsing. Once you remove the border, the margins collapse to one margin (in my case) 16px (the default for the element margin p
) and that margin is applied to the outer element (parent), so the background-color of the parent is no longer displayed. The parent's content area collapsed with her.
So, if you want a border, but don't want that yellowish area around the paragraph, you can either set the margin p
to 0, or add a border to p
, not a parent. I think by knowing the reason you can figure out which solution suits you best. :-)
And if you think my explanation is somewhat short and the W3 explanation is too technical, be sure to read SitePoint's explanation , which is quite complicated.
source to share
This is because you used a tag <p>
. See the following demo with div
instead p
:
http://jsbin.com/ciwomayuri/1/
To avoid this attachment attribute property to yours p
in this example:
http://jsbin.com/hifadijera/1/
As the JRulle says , every browser has a default value for the tag p
, such as default font family and font colors.
source to share
This is due to the style of the so-called "user stylesheet". By default the tag <p>
has margin-top and margin-bottom = 1em. And if you remove the border attribute from #parent, the tag <p>
won't change its default attributes. You can check this by hovering over it in the code inspector. Since the parent div has no border, so there is no object from which the <p>
browser should fill the color # ff9. In any case, the total height <p>
(including margins) is constant. The default attributes have the lowest priority. Therefore, if you define margin-top and margin-bottom from <p>
, it will be in your complete control :)
source to share