Inline CSS - block-level element and the difference

Inline elements:
1, inline elements (inline) will not on its own line, adjacent inline elements will be ranked on the same line. Its width varies with the content. 
2, the width and height can not be set with the element 
3, the element may be provided inline margin, padding, but only valid in the horizontal direction.

Massive elements:
1, block elements will be on a separate line, the width of the filled automatically default width of its parent element 
2, may be provided block elements width and height 
3, block-level element can be set margin, padding

Inline block elements inline-block:
is simply presented as inline objects to the object, but the content of the object as the object appears to block (height and width can be set margin value). After the inline objects are arranged in the same inline. For example, we can give a link (a element) inline-block attribute values, it has both properties of block width and having a height inline counterparts characteristics.

4. The difference between each
main difference is three aspects: First arrangement, two wide margin set high, the third is the default width.

(1) block-level elements will be on a separate line, and inline elements and inline block elements are displayed in a row.

(2) block-level elements and block elements may be provided inline width, height attribute, and set invalid inline elements.

Width (3) of the block-level element default is 100%, while the inline element width is determined according to its own content or sub-element.
----------------
Disclaimer: This article is CSDN blogger "small dog milk" in the original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source and link this statement.
Original link: https: //blog.csdn.net/ycq521131/article/details/82590308

Guess you like

Origin www.cnblogs.com/Damocless/p/11939585.html