For more content, welcome to follow the WeChat public account "Let Knowledge Become an Asset"
Most of the elements in HTML are block-level elements or inline elements.
Understanding block and inline elements is fundamental to understanding CSS floats.
Meaning and Features
Inline element - Also called an inline element, occupies only the space contained by the border of its corresponding label.
Features -
- On the same line as other elements;
- Height, line height, and margins and padding cannot be changed;
- Width is the width of its text and images, and cannot be changed;
- Inline elements can only accommodate text or other inline elements.
block element - A block element occupies the entire space of its parent (container), thus creating a "block".
Features -
- Always start on a new line;
- Height, line height, and margin and padding can be controlled;
- Width defaults to 100% of its container, unless a width is set;
- Block-level elements can accommodate Inline elements and other block-level elements.
Inline-block element (inline-block element) - combines the characteristics of inline elements and block elements, but each has its own trade-offs.
Features -
- No word wrap
- Able to recognize width and height
- The default arrangement is from left to right
the difference
- Inline elements are on the same line as other elements; block-level elements are on a line of their own.
- Inline elements can only accommodate text or other inline elements; block-level elements can accommodate other block-level elements or inline elements.
- The width, height, padding, and margin of inline elements cannot be changed; the width, height, padding, and margin of block-level elements can be set.
Common inline and block-level elements
Common inline elements -
- a
- span
- img
- input
- select
- strong
Common block-level elements—
- div
- p
- the
- ol
- at the
- h1~h6
- form
- table
Transitions between inline and block-level elements
diplay
- Block-level elements default to display:block; inline elements default to display:inline; inline-block elements default to display:inline-block;
- display:none; does not display the element, and does not retain the document flow position that the element originally occupied;
- display:block; converts to a block-level element;
- display:inline; Convert to inline element;
- display:inline-block; converts to an inline block element.
float
When the inline element is set to float:left/right, the display property of the inline element will be assigned the block value and has the floating feature.
position
When positioning an inline element, both position:absolute and position:fixed will make the original inline element become a block-level element.
For more content, welcome to follow the WeChat public account "Let Knowledge Become an Asset"