CSS block-level elements and inline Elements

Elements in a page are generally divided into two types: block-level elements and intra-row elements (Inline elements). These elements are actually divided into two types, so there must be a difference between them:
1. Block-level elements always occupy only one row. There is a line break between the front and back, and the inline element always occupies one row with other inline brothers.
2. Block-level elements can be configured with width and height values, so inline elements will not work. Their width and height will always automatically expand and decrease as their content grows.
3. the margin and padding of block-level elements are normal, the left and right maring and left padding of inline elements are normal, and the upper and lower layers are not recognized. That is to say, the Row Height cannot be changed through margin-top and padding-top. (The padding between the line element margin and padding is completely parsed in each browser, and the padding between the upper and lower layers is the cup. The resolution of Each browser is different. Setting a background seems to be recognized by others, however, the elements around him do not set the upper and lower spacing when they do not exist. Therefore, in future projects, they will not set the upper and lower margin and padding for the elements in the row)

Summary: If you want to exclusively occupy a row, block-level elements (DIV, DL, DT, DD, UL, li...) will be displayed ...), if you want to make the elements and other elements in a row use the line elements (span, A, IMG), you can use styles to convert disply: block; display: inline;