Differences between block-level elements and intra-row Elements

Differences between block-level elements and intra-row Elements

Block-level elements and intra-row elements are the two most basic layout elements. Common block-level elements include div, p, form, ul, ol, li, etc, common row elements include span, strong, and em.
What is the difference between block-level elements and intra-row elements?
A block-level element occupies only one row. By default, its width is automatically filled with the width of the parent element, and the elements in the row are not exclusive. The elements in the adjacent row are arranged in the same row, the line breaks only when a row is not arranged, and its width varies with the content of the element.
You can set the width and height attributes for block-level elements. The width and height attributes for intra-row elements are invalid. Even if the block-level elements set the width, they still occupy one row.
The margin and padding attributes can be set for block-level elements. The argin and padding attributes of the row elements are very strange. The horizontal direction is margin-left, margin-right, and padding-left, padding-right produces margin effects, but the vertical margin-top, margin-bottom, padding-top, and padding-bottom do not produce margin effects.
The CSS attribute of block-level elements and intra-row elements is display. block-level elements correspond to display: block, and intra-row elements correspond to display: inline. we can modify the dispaly attribute to switch block-level elements and intra-row elements.
--------------------------
Display: inline-block: it is a block-level element in a row. It has the features of block-level elements. You can set the length and width, set the margin and padding attributes, but it is not an exclusive row, its width does not fill the parent element, but is the same as the element in the row. It can be in the same row as the element in other rows.
IE6 and IE7 do not support display: inline-block, but can trigger hasLayout.
For example:

IE6 and IE7 do not support display: inline-block, but can trigger hasLayout.
Changing label p to span can trigger the hasLayout element in the row to simulate the display: inline-block effect. The span is aligned at the bottom of IE6/7 and in IE8/F.
Irefox is the top alignment, so * vertical-align:-10px; is required;