How Are Elements Displayed?
Every element has a default display property value，
Things get interesting with the inline-block value. Using this value will allow an element to behave as a block-level element, accepting all box model properties (which we’ll cover soon). However, the element will be displayed in line with other elements, and it will not begin on a new line by default.
The Space Between Inline-Block Elements
One important distinction(区别) with inline-block elements is that they are not always touching, or displayed directly against one another. Usually a small space will exist between two inline-block elements.
Every element on a page is a rectangular box.
Please keep in mind that inline-level elements will not accept the width andheight properties or any values tied to them.
Margins only workhorizontally(水平地)—left and right—on inline-level elements. Padding works on all four sides of inline-level elements; however, the vertical padding—the top and bottom—may bleed into the lines above and below an element.
The margin and padding properties are completely transparent and do not accept any color values. Being transparent, though, they show the background colors of relative elements. For margins, we see the background color of the parent element, and for padding, we see the background color of the element
Individual Border Sides border-top, border-right, border-bottom, and border-left.
Border Radius :
border-sizing: