Block-level elements (blocks) and inline elements (inline) in CSS

Source: Internet
Author: User

There are 3 basic positioning mechanisms in CSS:
Normal flow (relative positioning is actually considered as part of the normal flow positioning model)
Float (float)
Absolute positioning (fixed positioning is a kind of absolute positioning)
So before learning to float, we need to understand block-level elements and inline elements (inline elements).
block-level elements: block-level elements are generally used as containers, which can accommodate inline elements as well as block-level elements such as DIV and P.
Common block-level elements:
(1) Div: Mainly used for frame layout.
(2) H1~h6: Used to set different levels of headings.
(3) P: Creates a paragraph that automatically creates some whitespace before and after it.
(4) HR: Used to create separation first.
(5) OL: Create an ordered list.
(6) UL: Create unordered list.
features of block-level elements:
1. Block-level elements can accommodate both inline elements and block-level elements.
2. Block-level elements are exclusive on a single line in the default case.
3. Block-level element size can be controlled, CSS can be width and height to set the height and width. The width default value is 100% of the container's width.
4. Block-level elements can set the margin and padding properties.
5. Block-level element corresponding to the attribute Display:block;
Inline element: Any visible element that is not a block-level element is an inline element. Inline elements can only accommodate text or inline elements.
Common inline elements:
(1) Strong: bold emphasis.
(2) EM: italic emphasis.
(3) S: Strikethrough.
(4) U: underline.
(5) A: hyperlinks.
(6) Span: a common row level that defines inline elements in a document.
(7) img: Picture.
(8) Input: Form.
features of inline elements:
1. Inline elements can, by default, be on one line with other inline element elements.
2. Inline elements By default the size is not controllable.
3. Inline elements can produce line breaks and spaces.
4. Inline element correspondence attribute Display:inline;
5. Inline elements can only hold text or inline elements.
The margin and padding properties of the inline element, the horizontal padding-left,padding-right,margin-left,margin-right all produce the margin effect, but the vertical direction of the padding-top, Padding-bottom,margin-top,margin-bottom does not produce a margin effect.
Display:inline-block: You can have elements that have block-level elements and attributes of inline elements-you can set the length-to-width, allow padding and margin to take effect, and side-by-line with other inline elements.

Block-level elements (blocks) and inline elements (inline) in CSS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.