0

source spec: Anonymous block boxes.

I'm confused about this sentence.

When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

I don't know whether the "relative positioning" is the general meaning, I mean it can be absolute or fixed, and other properties of display, e.g, inline-block.

Let's see examples.

I know DIV broke the line box, but position: relative seems useless, I can remove it directly.

.father {
  position: relative;
  border: 1px solid red;
}
<span class="father">
  <div>Hi Wick</div>
</span>

But, If I modified relative to absolute, I knew the line box wasn't "broke", so border worked normally. If I added the inline-block property of display, the result is the same.

.father {
  position: absolute;
  border: 1px solid red;
}
<span class="father">
  <div>Hi Wick</div>
</span>

Also, what does any resulting translation mean? I know some behaviors may change containing block, so they will be affected by their descendants. I'm not sure whether it is about the containing block.

Therefore, I need some examples!

Chance Snow
  • 2,440
  • 1
  • 18
  • 19
OnlyWick
  • 342
  • 2
  • 10
  • 1
    Your example HTML does not really follow in the context/concept of the anonymous block - which is the block around the text above the `p` block – Mark Schultheiss Nov 17 '22 at 18:23
  • Does this answer your question? [Identifying Anonymous Block Boxes](https://stackoverflow.com/questions/52981136/identifying-anonymous-block-boxes) – Mark Schultheiss Nov 17 '22 at 18:28

1 Answers1

0

A <span> element is inline, which means it has no "box" around it to apply a border to. It's treated the same as a line of text with no container. Imagine it as a horizontal line where the center of each letter inside it is placed on that line. Applying position: absolute; to a <span> causes it to be treated the same as if it was display: block;, which is why the border property works on it then.

In your first example, the inner div is a block level element inside an inline element. If you applied a border to the div, you'd see it stretches across the width of the container to fill the space horizontally. Since the parent span is inline, the border doesn't show like you want it to, but the height of the child div at least gives some level of "size" to the span, if only vertically.

Also, "any resulting translations" just refers to CSS properties that move the element on the screen, such as left, right, top, bottom, or transform: translate();.

drowninginteger
  • 16
  • 2