The problem of white space caused by element wrapping_html/css_WEB-ITnose

(1) Two elements, one of which is a block-level element, will definitely wrap. After the line wraps, there will be a blank gap line between the upper and lower elements
(2) Both are inline elements, but If the width of the inline element exceeds the width of the parent element, it will automatically wrap. After the line wraps, there will be a blank gap line

between the upper and lower elements. I want to know the cause and solution of this blank gap line. Can any expert I know, I'd be very grateful if you could explain it to me.

Reply to discussion (solution)

should be the browser's default style.
Firebug observes the style of elements?
Generally reset the style sheet at the beginning of css, add margin:0;padding 0; or something like that, and remove the default margin and padding

In fact, problems like this can be completely avoided. The biggest headache is knowing it You can't just do it
1) Since the effect is no longer displayed in one row, you can use two block-level elements, or set the width after floating
2) If the child exceeds the parent, it itself There are compatibility issues, and the parent will be opened under IE6. You can set overflow:hidden

In addition, elements displayed as diplay:inline-block; will be displayed in the same row, and the code line breaks will be parsed. It is the so-called blank gap. There is no solution, it is floating. You can understand floating as an upgraded version of diplay:inline-block;