The problem of inline box, ghost blank node

teacher Zhang Xinxu said that as long as there is an "inline box", there must be a "row box"
so why does the span below have a height of 0 and does not trigger the ghost blank node? Isn"t an empty span considered an inline box? 

<div><span></span></div>

and span sets inlin-block to trigger? 

<div><span style="display:inline-block"></span></div>

clipboard.png

Css
Mar.03,2021

W3C specification has the following paragraph:

Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

means that if a line box has no text, reserved spaces, non-zero margin or padding or border inline elements, or other in-flow content (such as pictures, inline-block or inline-table elements), and does not end with a reserved newline character, it will be considered a line box with a height of 0.

The
< / div > in the

question fits this special situation, but not if it is set to inline-block. The subject can also try to change display to inline-table, or set non-zero margin, padding, border, etc., in short, as long as it does not meet any of the above, it will be affected by the "ghost blank pixel" (officially called "strut" element), resulting in line height.

re-read several related blogs in detail:
CSS deeply understand the relationship between vertical-align and line-height
CSS float float, Detailed explanation and expansion (1)
if you feel that your understanding is correct, The original meaning: the ghost blank node should be caused by font-size , line-height , vertical-align and other related attributes. span in the, line boxes model is also an inline box, but it is only one of the necessary conditions to trigger the ghost blank node!

< hr > 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .box {
      background-color: yellow;
      // font-size: 0;  // 1
      // line-height: 0; // 2
    }
    .box,
    .box > span {
      outline: 1px solid -sharp333;
    }
    .box > span {
        // vertical-align: top; // 3
    }
  </style>
</head>
<body>

  <div class="box"><span style="display:inline-block; width: 100px;"></span></div>

</body>
</html>

the above examples, such as font-size:16px and line-height: normal
are shown in the chrome browser, when span > is set to display:inline-block , line-height and vertical-align work by default, and ghost blank nodes appear! However, try to cancel the note 1 comment, or be more clear: first cancel the note 2 comment, and then cancel the note 3 comment. You can see that the ghost blank node is the result of line boxes height (height,line-height) and vertical baseline alignment ~

.

this is some of my understanding, hoping to help, or to take a closer look at the above article? ?

in code

< / div >
. this part forms an inline box

The

row box box is wrapped in a row of inline boxes, such as

. < / div >, where. is wrapped by the row box box.

finally, the blank node appears in front of the row box, that is, strut. .

if you set the line-height of the div element, you can find that in

hha < / div >, the height of the div is not equal to the height of the span element, and the height of the div element is the

affected by the blank node.

this empty has a height, and the height behaves the same as if there is a "strut" in front of it. All line-box are preceded by a "strut", and each containing-block has at least one "strut". (this "strut" behaves like other inline elements, only with a height width of 0.) the inline element cannot set the width,height, to hold up the containing-block. only when the height width is 0. Set the horizontal width of the padding,border,margin, to appear, so prop up the height of the container.

here the containing-block of the inline-block element with 0 width and height has a height exactly equal to line-height. This height can only be caused by different baseline alignments. the special feature of the inline-block element is that the interior can hold line-box, so there is at least one "strut" inside. Here the baseline of the "strut" of the containing-block is at the top, and the baseline of the "strut" in the inner inline-block is at the bottom. (inline-block element baseline gives priority to the bottom inline element of the baseline, of the inline element without any inline element is the bottom margin edge) 

<div><span></span></div>
div0,span.
<div><span style="display:inline-block;"><i></i></span></div>
i

the two baselines are aligned, and the distance from the baseline to the baseline is the definition of row height.

I found that it is the problem with the browser. There is really no height with Google. If you change it to Firefox, you can also try it.

Previous: The problem of nesting traversal of two for loops

Next: How does vue-router clear all its previous history after arriving on a page?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu