Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the difference between css line inner box and block box". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Differences: 1. The inline box does not comply with the strict box model, while the block box complies with it. 2. The space occupied by the block box in the browser is composed of the element size, the inner margin, the border and the outer margin, while the inline frame is determined by the element size. 3. The inline box cannot set the height, but the block box can. 4. The browser in the inline box will ignore the settings of padding and margin, but the block box will not.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

It is well known that DOM elements are divided into inline elements and block elements under the definition of css style. Because of the browser's box model, we can think of elements as boxes, so these two categories are also called inline boxes and block boxes. The purpose of this article is to introduce the browser's different rendering modes for these two boxes.

Block box (block element)

Strictly follow the box model-the space occupied by an element in the browser consists of element size, inner margin, border and outer margin, and obeys the principle of outer margin superposition. The so-called outer margin superposition principle is not the summation principle but the maximum principle. For example:

(1) the upper and lower div elements are next to each other. The upper div element sets margin-bottom, and the lower div element sets margin-top, adding a border to both div. At this time, the effect of the two div in the browser is not the sum of margin-botton + margin-top before the two borders, but the largest of the two values apart.

(2) there are not only margin superposition rules for different and adjacent block elements, but also superposition rules for adjacent margin of the same element. Think about the empty element, isn't its outer upper margin and outer lower margin directly adjacent?

Inline box (inline element)

In-line elements do not follow a strict box model. Its vertical position in the browser is determined only by the size of the element and the height of the inline box cannot be set with css, and the browser ignores the settings of padding and margin.

No matter what value we set for margin, there is no effect, but there is a padding trap for the inline box.

For example, if you write a span on the page, add a border line to it, and then change the value of padding, the bounding box will become higher, on the surface, the value of padding supports the height of the box in the line, and the height of the whole box consists of the height of the element and the upper and lower inner margins, but if you write a div under the span, then the problem comes.

Div is not as wide as pandding from span, but instead sets up a new line directly at the end of the line height of the span element.

This shows that the browser's interpretation of the span box is completely different from the block box. The vertical padding,margin will not automatically prop up the height of the inline box for the element to occupy space in the browser only by the contents of the inline box, because in this way, the only way to change the height of the inline box is to set the line height for the inline element.

Description:

Height of inline box = text height + line spacing

Row box height = top of the highest line inner box-bottom of the lowest line inner box

There is a distinction between the highest and the lowest because there may be fonts of different sizes and different positions on the same line, so there are different inline box heights.

From a large level, the inline box is for the individual and the row box is for the whole.

As shown in the figure below, the box in which box is located is the highest and lowest point of the whole row, and the row frame is supported by it.

So the line box = the inline box of box.

The other small boxes are the inline boxes of each text.

This is the end of the content of "what is the difference between a css line box and a block box". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.