Block-level elements and inline elements

• Common block-level elements are div,form,table,p,pre,h1~h6,dl,ol,ul,li and so on.
• Common inline elements are span,a,strong,em,label,input,select,text,textarea,img,br and so on.
• If you need to set a fixed width or height on an inline element or set a margin or padding in a vertical direction, you need to convert it to a block-level element, use Display:block, or Display:inline-block
• • Display:block
  1. 1. The block element will have a single row, and multiple block elements will have their own new row. By default, the block element width automatically fills the width of its parent element.
     2. The block element can set the Width,height property. Block-level elements, even if they are set to a width, are still exclusive rows.
     3. The block element can set the margin and padding properties.
  • Display:inline
  1. 1. The inline element does not have a single row, and multiple adjacent inline elements are arranged in the same row until one line is not arranged before a new line is changed, and its width varies with the contents of the element.
     2. The inline element setting width,height property is invalid.
     3. The margin and padding properties of the inline element, horizontal padding-left, Padding-right, Margin-left, and margin-right all produce margin effects, but the vertical direction of the padding-top, Padding-bottom, Margin-top, Margin-bottom does not produce a margin effect.
  • Display:inline-block
  1. 1. In simple terms, the object is rendered as an inline object (which can be displayed on one line ), but the object's contents are rendered as a block object ( you can set the height and width, You can set the vertical margin and padding). Subsequent inline objects are arranged in the same row. For example, we can give a link (a element) Inline-block attribute value, so that it has both block width height and inline peer characteristics.

Block-level elements and inline elements