elaboration of the inline element

Although it seems very easy to understand what an inline element is, I have not found an accurate definition of inline element.

Somebody says inline elements are those displayed in a line. This is ridiculous. An inline element can contain <br> in it so it will be displayed on multiple lines. Others say “An inline element does not start on a new line.” Still wrong. <br> is an inline element, but it starts a new line. Another confusion is the concept of a line. Some text can be arranged in a line, which can be easily seen. But how about a large <textarea> element? <textarea> is also an inline element, but its height may equal to several lines of text.

This is a more accurate definition of inline elements:

Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.

The main point is inline elements do not break the flow of the content, i.e., they are displayed in the flow of the content. For example, a <span> element containing some text that is after a <textarea> element will display the text from the right-bottom of the <textarea>, which is the flow of content. This <span> element may contain sentence 1, then a <br>, and then sentence 2, so sentence 2 will be displayed below the <textarea>. Another <span> may follow this span, so its content will be shown right after sentence 2. The flow of the content is never broken in the process. Although no block element is involved till now, the content displayed still occupies several lines.

On the contrary, block elements bring a line break at the beginning and introduce another line break at the end, so they are displayed on new lines.

But an inline element can be displayed as a block using the “display:inline-block” css property. What is a block? A block is a rectangle area defined by width/height. So, the width/height css property is respected for “display:inline-block” elements, even they are inline elements. Without “display:inline-block”, inline elements have no concept of width/height, and the width/height property, if given, will be ignored. Now, the content of the inline element will be arranged in that block. The whole block will be considered as the layout of the inline element and displayed in the flow of content. Don’t forget, inline elements do not break the flow of content, so the block can be displayed next to the previous element, rather than below it as a block element does. Of course, if the block is too wide to be put on the same line as previous element, it will be laid on the next line, but it won’t introduce a new line break at the end, so the inline element after it can be displayed next to it.

Did you like this?
Tip admin with Cryptocurrency