Website construction - detailed explanation of front-end CSS block elements and inline elements

In the css box model, we mentioned block elements and inline elements in html elements. So what are they?

      Block elements are generally container elements of other elements, which can accommodate other block elements or inline elements. P tag and DIV tag are common. The block element is like a square block, which can be placed with other four blocks and displayed anywhere on the page.

Let's take the div tag as an example, Set a style of "200px in width and 200px in height and red in background color" for the div tag to get a square of 200px in width and height, as shown below:

Try to add another div tag and add the margin bottom margin to distinguish their positions. Next, remove the width. You can see that the width has widened. From the left to the right of the browser, there are two red blocks that appear line by line as if they are overbearing, as shown in the following figure:

From this, we know the characteristics of block elements:

Inline elements are also called inline elements or inline elements. Inline elements can only contain text or other inline elements. Common inline elements include a and span.

Take span tags as an example, add three span tags, and set the style of "width height 200px, background color red margin10px", It is found that it is not displayed as 200 * 200, and the margin tag has not changed from top to bottom. From this, the reference block element can be seen that:

Properties of inline elements:

           1. The width and height are stretched by the content

2. Width and height are not supported

3. Labels of the same type can continue to be displayed on one line

4. The upper and lower features of the margin are not supported

5. Code newline is parsed