A box with a wide height of auto in CSS

In the CSS box model, the Auto attribute only applies to external margin and width,border and padding are not applicable. Here's what it's about. All that is said here is the standard flow box.

1. Horizontally Speaking

(1) If you set a value in Width,magrin-left,margin-right to auto and the remaining two to the specified value, the property set to auto determines the desired length, so that the width of the element is equal to that of the parent element. For example, the box's transverse length must be equal to 400px, without setting padding and border,margin-right and width set to 100px, and the left margin set to auto, then the width of the left margin will be 200 pixels.

(2) if not set to auto, the above example, the left and right margin and width are set to a pixel (formatting attributes are too limited), at this time will always force margin-right to auto;

(3) When there is more than one auto. If these three attributes left and right margin and width, two are set to auto;

If Margin-right and Margin-left are set to auto, the two are set to equal lengths, so the element is centered in the parent element ( this is a method to center the element, and text-align applies only to inline content of the block-level element. Set it to center and cannot center this element )

If you set a margin and width to auto and the other margin is set to a specified pixel, the margin set to auto will be reduced to 0,width and set to the desired value;

If three are set to auto, this result is the same as the default result, that is, the margin is 0, the width defaults to auto;

2. Auto Height

If the block level normal flow element is set to Height:auto;

(1) for inline content (including text), the height of the display is exactly enough to contain the line height of the inline content. A border is set on the element paragraph, and it is thought that there is no padding, so that the bottom border is just below the last line of the text, and the top frame is above the first line of text;

(2) If there is only a block-level child element, its default height will be the distance from the bounding box boundary of the highest block-level child element to the outer border boundary of the lowest child element. Thus, the margin of the child element "exceeds" the element containing the child element, however, if the block level element (that is, the parent element) has an inner margin or a border, its auto height is the distance from the sisu boundary of the highest child element to the bottom margin boundary of the lowest child element;

A box with a wide height of auto in CSS