css block level elements and inline elements

foreword

There are many kinds of HTML tags, common tags are <div>, <p>, <li>and <img>, <span>etc.

CSS usually divides these tags into two categories for the needs of fluid layout: block-level elements and inline elements (inline-level elements).

Because CSS was originally born to solve the graphic layout of web pages, tags are divided into two categories for layout needs, block-level elements are responsible for structure, and inline elements are responsible for content.

block level elements

The block-level element (block-level element) is 'used to be responsible for the structure' , it is displayed vertically, the width is automatically filled, and the width and height can be set. Common block-level elements include div, h1 ~ h6, p, ol, ul, li, etc.

Here is a special explanation:

The element of display: block is a block-level element, but it does not mean that the block-level element is display: block;

For example: <li>the default value of the label display is list-item, and <table>the default value of the label display is table. But they are all block-level elements.

clear float

Since the block-level element has line-wrapping features, it can be combined with the clear attribute to clear the floating.

    .clear:after { 
        content: ''; 
        display: table; // 也可以是 block，最好不要是 list-item 
        clear: both; 
    }

Why should it not be list-item?

Because display: list-item; is mainly because it has poor compatibility and IE browser does not support it,

And for the additional bullets that will appear, you have to add a line list-style: none;

inline element

Inline elements (inline-level elements) 'for content' , it is displayed side by side, the width automatically shrinks, width and height cannot be set. Common inline elements are a, span, b, u, label, em, etc.

Here also need special explanation:

The same is true for inline elements. Elements whose display is inline are inline elements, but it does not mean that block-level elements are display: inline;

display is inline-block and inline-table are both inline elements.

For example: button, its display default value is inline-block; it is an inline element.

epilogue

This is the end of this article

If you have any other ideas, welcome to communicate in the comment area!