Convert to inline and block

What is the difference between block and inline?

Before developing and managing style sheets, I want to insert a small knowledge. Looking at the web standard design group a few days ago, long youkang asked about the difference between block and inline. I remember that people often asked such questions in the past. domestic forums and foreign forums seem to be confused about what the two are. Think about the fact that many people will make some common mistakes here, so let's just open an articleArticleLet's talk about block and inline.

-Concepts should be discussed before presentation.
Here I want to emphasize that the concept is very important in front-end development ~

Many people may think that you can just create a style and place it on the left and right. But in fact, there are some very difficult situations. You need to respond to these situations. The solution depends on many factors, one of which is inspiration and the other is a deep understanding of the concept.

Here, we need to clarify the concept of block and inline?

In fact, the block and inline concepts are mentioned in three completely different parts of the Golden shining bling specification. Maybe this is why so many people will feel confused = V =

-Block-level elements vs inline Elements
The first part of the concept of block and inline is in the HTML specification. Specifically, it should be block-level elements (Block-level element) and inline elements (Inline element ):

All elements that are allowed to be contained by the body element are either block-level or Inline. They can be counted as block-level or inline. But there is absolutely no element that can be contained by the body, that is, it is not a block-level, not an inline element.

Common block-level elements include Div, form, table, P, pre, H1 ~ H6, DL, ol, UL, etc.

Common inline elements include span, A, strong, em, label, input, select, textarea, IMG, and BR.

In addition, the script, object, MAP, button, Del, and INS elements can be both block-level elements and inline elements.

 

What are the differences between block-level elements and inline elements? It is embodied in the following aspects:
Generally, block-level elements can contain block-level elements and inline elements, but inline elements can only contain inline elements. Note that each specific element can contain specific elements, so this rule is not applicable to individual elements.

For example, P elements can only contain inline elements, but cannot contain block-level elements.

1: <! -- This is wrong. -->
2: < P > < Div > Text </ Div > </ P >
3:
4: <! -- This is what B = V = -->
5: < P > < Span > Text </ Span > </ P >

Another difference is in display. Block-level elements are usually separated by reality, and both sides are replaced by a line. inline elements do not generate line breaks, and a series of inline elements are displayed in a line. However, it is determined that the page displays a style table instead of the element itself. It is estimated that this rule is mostly made to enable browsers that appear above the specifications to justify themselves.

For example, we know that the default display layout of table elements uses a unique set of display: Table rules, while the BR element is essentially a line feed. Even a DIV, you can use a style sheet to directly specify the display: inline, so this rule is useless.

What are the essential differences? In fact, the most essential difference is that, under the strict DTD, the body element can only contain block-level elements, but not inline elements. Maybe you want to ask, isn't the element contained in the body either block-level or Inline? Why is there no inline? Very simple-because in the transitional DTD, the body can also contain inline elements.

Let's take a look at the specific example:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8"   />
< Title > Block-level vs inline demo </ Title >
</ Head >
 
< Body >
 
<! -- This is wrong. -->
< IMG SRC = "/Someimage.png" Title = "An image" ALT = "An image"   />
 
<! -- You must do this. -->
< P > < IMG SRC = "/Someimage.png" Title = "An image" ALT = "An image"   /> </ P >
 
</ Body >
</ Html >
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8"   />
< Title > Block-level vs inline demo </ Title >
</ Head >
 
< Body >
 
<! -- If you change the DTD, it will all be OK. -->
< IMG SRC = "/Someimage.png" Title = "An image" ALT = "An image"   />
< P > < IMG SRC = "/Someimage.png" Title = "An image" ALT = "An image"   /> </ P >
 
</ Body >
</ Html >

-Block box vs inline box
You should have some knowledge about the CSS box model. The content layout on the webpage is implemented by controlling box.

In the css2.1 specification, controlling box is divided into three types: block box and inline box, which are not widely supported so far. This is where block and inline are mentioned in the second part of the Specification. The content on the webpage, whether surrounded by tags or the display mode, is finally calculated as a controlling box and applied layout rules.

Fortunately, this process is transparent for front-end development. You don't have to consider it, but you just need to consider the differences between the two boxes.

In a normal layout, the block box is separated from top to bottom, and the inline box is from left to right (or from right to left due to the setting of direction, or from top to bottom.
Inline box does not respond to vertical attributes such as margin, width, height, max/min width/height. block box can respond to these attributes.
This is basically the case for common use.

-Display: block vs display: inline
Here is the last place where block and inline are mentioned. Unlike the other two places, block and inline are not the unique values of the display attribute. In the css2.1 specification, the value of the display attribute can be any of the following: inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit.

In general, display: block allows elements to generate a block box, while display: inline generates an inline box.