CSS Box model

The box model in CSS is commonly used in page layout positioning, and the box model consists of three parts: 1 content Area 2 border Border 3 padding padding 4 margin margin each element has a box model,

In the Web world, box models are ubiquitous. The padding and margins and borders can be applied to all edges of an element, or to individual edges, and margins can be negative, and in many cases negative margins are now used

In CSS, width and height are the widths and heights of the content area (element). Increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box. Assume that each side of the box has

10-pixel margins and 5-pixel padding. If you want this element box to reach 100 pixels, you need to set the width of the content to 70 pixels,padding(padding):padding-top,padding-bottom

, padding-left,padding-right margin(margin):Margin-top,margin-bottom, Margin-left,margin-right When margin is set to a negative number, the block that is set to a negative number is in the opposite direction

Moving, even covering the other blocks. When there is a parent-child relationship between blocks, by setting the margin parameter of the child block to a negative number, you can "detach" the child block from the parent block, and the elements in the box model are divided into block-level elements and inline elements

Two block-level elements have overlapping effects in the box model, causing them to collapse to produce a BFC, and you can set the element to hide overflow from overflow:hidden so that it does not overlap. The inline element cannot be set to its width, height, and margin in the box model.

And the inner margin is set vertically, the margin does not change and the horizontal setting changes.

CSS Box model