CSS2【3】-- Positioning

the display property. We'll learn about four possible values.

***block***: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width.

***inline-block***: This makes the element a block box, but will allow other elements to sit next to it on the same line.

***inline***: This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line).

***none***: This makes the element and its content disappear from the page entirely!

The ***margin*** is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other.

The ***border*** is the edge of the element. It's what we've been making visible every time we set the border property.

The ***padding*** is the spacing between the content and the border. We can adjust this value with CSS to move the border closer to or farther from the content.

The ***content*** is the actual "stuff" in the box. If we're talking about a <p> element, the "stuff" is the text of the paragraph.

You'll see abbreviations like TM, TB, and TP in the diagram. These stand for "top margin," "top border," and "top padding." As we'll see, we can adjust the top, right, left, and bottom padding, border, and margin individually.

margin: auto;

居中，center our div

margin-top: /*some value*/
margin-right: /*some value*/
margin-bottom: /*some value*/
margin-left: /*some-value*/

border: 2px solid black;

padding-top: /*some value*/
padding-right: /*some value*/
padding-bottom: /*some value*/
padding-left: /*some-value*/

padding: value value value value;

If you want to move an element in the other direction, you can give CSS a negative value: margin-left: -20px will move the element twenty pixels to the left.