CSS box model
The css box model is composed of border, margin, padding, and actual content
(1) Border border
border: 1px solid black; // The first parameter 1px refers to the thickness of the border, the second parameter solid refers to the style of the border: solid line
The third parameter refers to the color of the border
border: 1px dashed black; // dashed line
border: 1px dotted black; // dotted line
(2) Margin (margin refers to the distance between the element border and adjacent elements)
An important role of the outer margin is to align the block-level boxes horizontally in the center. Requirements: 1. The block-level box must specify the width 2. The left and right margins of the box are set to auto. The most common practice: margin: 0 auto; the top and bottom margins are set to 0, and the left and right margins are set to auto
A common problem, when the block-level box B is located in the block-level box A, it is impossible to move the block-level box B down by setting the margin. To solve this problem, you can set a border (or border-top).
(3) Inner padding
First of all, make sure that the border border has a width. When you set a div box with a width of 100px and a height of 100px, if you add a border with a width of 1px, then its actual width and height will be Becomes 101px. The margin is the distance between the border of the element and other elements. No matter how you adjust the margin, the width and height of the element itself will not change. The padding refers to the distance between the content in the box and the border of the box, and the padding will open the box! ! !
padding: 5px; // The inner margin of top, bottom, left and right are 5px
padding: 5px 10px 15px 30px; // The first parameter is the top padding of 5px, the second parameter is the right padding, the third parameter is the bottom padding, and the fourth parameter is the left padding , The order is a clockwise, top right bottom left
(4) Eliminate inner and outer margins (important)
Many web page elements have default inner and outer margins, and the default formats of different browsers are also inconsistent, so the inner and outer margins of web page elements should be cleared before layout
* {
padding:0;
margin:0;
}
Add a little knowledge point, remove the bullet (little dot) in front of li
list-style:none;
