Can somebody explain to me what is a "line box" in HTML?

Question

I've been struggling to understand this for the past 3 days. Something seemingly fundamental and basic for HTML, yet it is virtually impossible to find a descent explanation anywhere on the internet. 

Yes, i did try to ask a question on Stackoverflow, but apparently my question was deemed too stupid and unsophisticated, so they down-voted me into oblivious which resulted in my account getting suspended. 

Can somebody here give me a good explanation about what is a "line box" and all the corresponding elements and stuff associated to it? 

I read an explanation that begins with the sentence- "In an inline formatting context, boxes are laid out horizontally..", i had to stop at this point, since i don't understand WHAT BOXES? What is "inline formatting content"? Do they mean inline-block level elements, or inline-level elements? The more i read, the more questions i have. 

Are "line-boxes" the actual element box, or is it the area that the content of the element takes? 

If i write a simple code

something

, the

element is a block-level element with a width of 100 percent of the element. So, is the

element the line-box, or is it the text "something" that is the "line-box"? If i have

red

is "red" the line-box, or is the entire element the line-box? Is the "div" element the "box" that is being laid out horizontally? 

I really hope somebody can give me a good overview of these basic concepts that i thought i already knew, but apparently don't.

Answer 1

P.P.P.S. OK...I've found the thing, and a "line box" is a real thing. (I didn't know that before you asked this question.)





Note that this is a little bit complicated AND and advanced aspect of the HTML spec. You may want to overlook it.



If you do NOT want to overlook it, here's the deal:

https://www.w3.org/TR/CSS2/visuren.html#inline-formatting



Simplified (but still accurate) explanation:

- A "line box" is an imaginary box that contains a set of inline boxes.

- - - The imaginary "line box" does not have padding or margins

- The imaginary "line box" fits INSIDE of the container that contains a set of inline boxes

- When a line of inline boxes exceeds the available width, boxes wrap to the next "line", and when this happens ***that second line is a separate line box***



So: a "line box" is ***very similar to a line of text***.



When text wraps to a second line you have two lines of text ***even though HTML cannot access those separate lines of text directly***. The lines of text are VISIBLE but they are not separate HTML elements.



SIMILARLY: when a series of inline boxes wrap to a second line you have two "line boxes" of inline boxes.

The "line box" is simply each line, including each wrapped line, of inline boxes.



They should have called it "line of boxes"

so that it would be analogous with "line of text"

but probably there is some reason that they did not.















P.S. Your initial question uses the term "line box", but I still don't know how that term is used in the context of HTML or CSS.P.P.S. If I don't know how the term is being used in the context of HTML or CSS, then I can't explain it BECAUSE I don't know how the term is being used in the context of HTML or CSS.

Note: I've rewritten parts of my answer to be more clear.



Simply stated: a "box"

is the imaginary "box"

which contains HTML or CSS content.



About HTML container boxes (that "imaginary box" I mentioned):

https://www.w3schools.com/Css/css_boxmodel.asp



In an inline formatting context

- means that each visual "object" appears immediately following the previous, on the same text line (just like each letter in a sentence appears after the previous letter, in a line, when you reach the end of the line the text wraps to the next text line)



boxes are laid out horizontally

- in other words, inline boxes, like characters in a line of text, are also inline, are also treated as characters, each box in a series appearing in the same line after the previous box - unless the end of the line is reached, in which case the box "wraps" to the next line



a

element is normally a block element (NOT an inline element). A block element normally takes up all of the available width. It is not in any (inline) line of text or line of boxes.



Similarly

is a block element.



Block elements such as

and

are not inline unless you use CSS to change them to inline.



This example demonstrates the difference between

- boxes that are display: inline

- boxes that are display: inline-block

- boxes that are display: block

https://www.w3schools.com/Css/tryit.asp?filename=trycss_inline-block_span1





Note: a problem I have with your question

is that I don't see you quoting the statement that uses the term "line box".

If I saw that term being used in context

I think would be able to explain what it means.

Answer 2

this is about as good a set of answers as you are going to get:

https://stackoverflow.com/questions/32022042/what-does-mean-line-box-in-css



and it even has a JSFiddle to give you a visual (read the result in the fiddle to learn more).



you could also use this code in your CSS to see ALL the line boxes:



* {

   border: 1px solid black;

}

Answer 3

Try your friendly search engine and enter these three words: html line box