What are the CSS inline elements? The difference between CSS block-level elements and inline elements

Source: Internet
Author: User
Many CSS beginners in the CSS inline elements and CSS block-level elements, it may be easy to confuse, then, this article will explain to you CSS inline elements and block-level elements of what? and the difference between CSS block-level elements and CSS inline elements.

What is the definition of CSS block-level elements in the previous article? What are CSS block-level elements? We introduce the block-level elements of CSS separately, so we won't say much here-let's go directly to the CSS inline elements.

Inline elements in CSS (line element)

CSS inline elements are also called inline elements, and inline elements are generally based on the semantic level (semantic) of the basic elements, can only accommodate text or other inline elements, common inline element "a". For example, the SPAN element, the display:inline of the IFRAME element and the element style are all inline elements. such as text such elements, each letter is arranged horizontally, to the right end of the automatic folding line.

Features of CSS inline elements:

1, you can and other elements in a row, do not have to start another line.

2. The height, width and top and bottom margins of the element are not set.

3, the width of the element is that it contains the text, the width of the picture, can not be changed.

After introducing the CSS inline elements, let's take a look at what the CSS inline elements are.

What are the CSS inline elements?

Common CSS Inline elements:

A: Anchor point
ABBR: Abbreviation
Acronym: First word
B: Bold (not recommended)
Bdo:bidi Override
Big: Large Font
BR: Line break
Cite: Reference
Code: Computer codes (required when referencing source)
DFN: Defining fields
EM: Emphasize
Font: Fonts settings (not recommended)
I: Italic
IMG: Pictures
Input: Enter box
KBD: Defining keyboard text
Label: Table Label
Q: Short Reference
S: Medium dash (not recommended)
SAMP: Defining sample computer code
Select: Project Selection
Small: Small font text
Span: A common inline container that defines chunks within a text
Strike: Medium Dash
Strong: Bold Emphasis
Sub: subscript
SUP: Superscript
TEXTAREA: Multi-line text input box
TT: Telex text
U: Underline

Next, let's look at the difference between CSS block-level elements and CSS inline elements.

The difference between CSS block-level elements and CSS inline elements

One of the differences between CSS block-level elements and inline elements:

Block-level elements: block-level elements are exclusive to one row, and by default the width is automatically filled with the width of its parent element.

Inline elements: Inline elements do not have a single row, and adjacent inline elements are lined up in the same row. Its width changes depending on the content.


The effect is as follows:

Two differences between CSS block-level elements and inline elements:

Block-level elements: block-level elements can be set to a wide height.

Inline elements: Inline elements cannot be set to a wide height.

Instance:


The effect is as follows:

NOTE: block-level elements, even if they are set to a width, are exclusive rows.

The three differences between CSS block-level elements and inline elements:

Block-level elements: block-level elements can be set margin,padding.

Inline elements: margins and padding, such as Margin-left and padding-right, can produce margin effects in the horizontal direction of the elements in the row.

Instance:


The effect is as follows:

Note: Inline elements, such as Padding-top and Margin-bottom, do not produce margin effects in the vertical direction.

The difference between CSS block-level elements and inline elements is four:

Block-level elements: block-level elements correspond to display:block.

Inline elements: inline elements correspond to display:inline.

Finally, a property: Display:inline-block; You can have elements that have block-level elements and attributes of inline elements: you can set the length-width, allow padding and margin to take effect, and side-by-line with other inline elements. is a very useful property.

Description: You can toggle inline and block-level elements by modifying the display properties of an element.

The article ends here too, if you want to know more CSS block-level elements and the difference between the elements in the line, you can go to the PHP Chinese Web CSS Video Tutorial section to see the video.

Related Article

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.