All geek questions in one place

Why does border affect blocking block size in CSS?

I understand that the height of the field in CSS is the height of the content, except for the field and the fill, but why with this example, if you uncomment the border: line in the containing div, the background color of the div is above the first paragraph, and if you don’t have a border, this not this way?

<html> <head> <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <title></title> <style type="text/css"> #container { background-color: green; /* border: black solid 1px; */ } p { background-color: red; margin-top:50px; margin-bottom: 0px; border: black dotted 3px; } </style> </head> <body> <div id="container"> <p>first paragraph</p> <p>second paragraph</p> </div> </body> </html>
+4
source share
3 answers

I understand that the height of the field in CSS is the height of the content, except for the margin and padding

False: it includes padding and border (except Microsoft Internet Explorer due to an error and now for compatibility reasons (if quirks rendering mode is used)). Read on the CSS box model :

A content edge surrounds the rectangle defined by the width and height of the window.

where the edge of the content is the edge passing around the outer border.

+2
source

@aizuchi,

Your CSS has a bug first. Check the correct pic for margin-bottom.

Second, add "overflow: hidden;" in the #container element, once you have set siez from the parent element, you must have this tag to indicate the parent size to be used. He will use #container to use the height of the child in his own (#container), which is probably a problem in your CSS except for "pic".

Thirdly, the error of the Google box model in IE6 to understand the difference between our "favorite" ie6 and other browsers.

Fourth,

better to use

 <LINK rel="StyleSheet" href="style.css" type="text/css" media="screen" />

instead

 <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
+1
source

The margin is outside the border, and the margins are inside the border, so your top edge will cause the margin to exist over the border. If you want the padding between your paragraph and the border to be used borderless. The size of the div will be determined by marking, indentation and border. All of them will contribute to the size of the div.

0
source

Source: https://habr.com/ru/post/1314322/

More articles:


All Articles