Feature: The magic of HTML && CSS

1: display:inline-block(beware of pits)

Multiple div tags use display: inline-block; Set in horizontal rows with gaps between the children

——- code block && implementation effect ——–

Dome: A little experiment

Browser effect, (if you can see why the conversion to inline block tags is not horizontal, you don’t need to know this article.)

——- Analyze the problem ——–

  1. Parent labels are supposed to be wide100px, just enough to fit two widths for50pxBecause there is a gap between the red squares, the width of the two red squares side by side is greater than the width of the parent element100pxSo the second red square is squeezed off.white-space: nowrap; Property is not set after newline

So the question is how did the gap between the red squares come about? There are several nodes involved in the element: text node element node blank node

Display: inline-block; It takes into account the blank nodes, so there’s a gap between each red square, and a blank node is the text, and the size is set to zero

——– solve —– :

Font-size :0;