1. HTML basics:
For more information, please refer to MDN's HTTP document
HTML elements can be divided into three levels:
- Top-Level (top element): html, body, frameset;
- block-Level (block-level element): A list of block-level elements such as: div p h1~h5 ul, etc.
- You can set the height, width, and margin of the element;
- The block-level element occupies the entire space of its parent element (container). When the element width is not set, it defaults to 100% of its parent container
- Block-level elements will start a new line
- inline (inline element/inline element): list of inline elements such as: <a> <span> <br> etc.
- Can only contain data and other inline elements, and other elements are on one line
- Height, width and margin cannot be set;
- The width of the element is the width of the text or picture it contains, it cannot be changed
Second, the difference between CSS margin and padding
https://www.cnblogs.com/HDK2016/p/6127856.html This blog is more detailed
Each block-level element has four sides: outer margin, border, inner padding, content side
margin: margin is explained in detail , refers to the distance between its own border and the border of another container, so it is often called the outer border, and is mostly used for its own margin relative to the outer container
padding: Detailed explanation of padding , which refers to the distance between the content of an element and its border. It is often called the inner margin and cannot be a negative value. It is mostly used for its own margin relative to the inner container.
- If the content area of the content area is set with a background, color or image, these styles will extend to the padding