1. Properties of a block element block

  • Monopolize a line;
  • The width defaults to 100% of its parent element unless a width is set;
  • Height, line height, margins, and margins can be set
  • Can accommodate other inline elements or other block elements, generally used with CSS to complete the basic layout of the web page;

Common block-level elements

div- Commonly used block-level container and main label of CSS layoutp- Paragraph H - heading label and horizontal line pre - formatted textform-- Interactive Formsol- Ordered formul- Unordered listli
dl- Defining a listmenu- Menu Listtable- tableCopy the code

2. Inline elements are inline

  • It does not monopolize a line, but wraps the parent element boundary automatically.
  • Height, row height, and inner and outer margins cannot be changed
  • The width is as wide as the content and is immutable
  • Inline elements can only hold text or other inline elements
  • For inline elements, setting width and height does not work. You can do this by setting line-height.
  • Margin and padding only work left and right, not up and down

2.1 Common inline elements

a- anchorspan- Commonly used inline containers define blocks in textimgPictures -input- input boxbutton- buttonlabel-- Table labeltextarea- Multi-line text input box select - item selection BR - Line feedstrong- Bold emphasisCopy the code

2.2 Spacing of elements in a row

If you set the border, padding, and margin to zero, there will be a certain amount of space between two inline elements. How can you remove this space?

1. Resets the font to the immediate parent of the inline elementfont-size:0px; This can be solved by setting the font size for the inline elements.2. With the help ofHTMLComments are inserted between two inline elementsHTMLA comment that tells the browser that it's not a line break or a space, but that it's joined together.Copy the code

3. Inline block element inline-block

Elements are arranged in a row with a default width determined by content. By default, elements are spaced between each other by default. Supports width, height, margins, and margins. If the font is not zero, then it will occupy a certain width, and these spacing will change with the font size.) Margin-left: -10px; margin-left: -10px; margin-left: -10px; margin-left: -10px , the negative value can block the gap. Font-size: 16px; font-size: 16px;0; (Can cancel the gap, but will affect the font size of other elements in the parent element box)Copy the code