Display: differences between inline, block, and inline-block

Source: Internet
Author: User

I. Block-level elements and row-level elements


To understand the differences between display: inline, block, and inline-block, you must first understand the features of block-level and line-level elements in HTML. In-line elements are also called inline elements.


1. Block-level elements


Always start with another line;
Height, Row Height, top and bottom margins can be controlled;
The default width is 100% of the container, unless a width is set.
Block-level elements are usually used as containers for other elements and can accommodate inline elements and other block elements. The HTML Tag of block element is as follows:

BLOCKQUOTE-block reference
Center-center alignment Block
Div-common block-level elements
DL-definition list
Form-interactive form
Fieldset-Form Control Group
HR-horizontal Separator
Ol-sort form
Ul-non-sorted list
Dir-directory list
Pre-format text
Isindex-input prompt
Menu-Menu list
H1.... H6-title
Noframes-frames (this block content is displayed in browsers that do not support frame)
NoScript-optional script content (this content is displayed in browsers that do not support scripts)


2. Row-level elements

And other elements are on one line;
Height, Row Height, top, and bottom margins cannot be changed;
The height is the width of the text or image it contains and cannot be changed.
Generally, they are basic elements based on the semantic level (semantic). They can only contain text or other inline elements. The HTML tags of inline elements are classified as follows:

Acronym-First word
Font-font setting (not recommended)
B-bold (not recommended)
Big-bidi override
Br-line feed
Small-small font text
Strong-highlighted in bold
Input-input box
Label-Table label
Select-Project Selection
Textarea-multi-line text input box
VaR-define variables
Code-computer code (required when source code is referenced)
Dfn-define Fields
KBD-define keyboard text
Q-short reference
S-hyphen (not recommended)
TT-telex text

Some elements in HTML are variable elements, which can be determined as block elements or Inline elements according to the context.

Applet-Java Applet
Del-delete text
IFRAME-inline Frame
INS-inserted text
Map-image block (MAP)
Script-client script


Ii. Differences between inline, block, and inline-block


1. display: block indicates that an element is displayed as a block-level element.

The block element has the following features:
Always starts on a new line;
Height, row height, and top and bottom margins can be controlled;
The default width is 100% of its container, unless a width is set.
Div, P, H1, form, UL, and Li are examples of block elements.


2. display: inline indicates that an element is displayed as a row element.

The Inline element features:
And other elements are on one line;
High, the Row Height and top and bottom margins cannot be changed;
The width of a text or image cannot be changed.
SPAN, A, label, input, IMG, strong, and Em are examples of inline elements.

Inline and block can control the high row width of an element. The switchover is as follows:

Start an inline element from a new line;
Keep block elements and other elements on one row;
Controls the width of inline elements (especially useful for navigation bars );
Controls the height of the inline element;
You can set a background color that is the same as the text width for a block element without setting the width.


3. display: inline-block

The object is presented as an inline object, but the content of the object is presented as an inline object next to the block object in the same row. spaces are allowed.Inline-blockThe object is presented as an inline object, but the content of the object is presented as a block object. The Inline object next to it will be presented in the same row, and spaces are allowed (to be precise, the elements applying this feature are rendered as inline objects, and the surrounding elements are kept in the same row, but you can set the attribute of the width and height of the block element), but this element has the attribute of the block element, you can set its height, width and other attributes. When there are elements with different heights in the same row, you must set an alignment such as vertical-align: Top; to align the top of the element.




Not all browsers support this attribute. Currently, the following browsers are supported: Opera and Safari use display: inline-block for inline elements in IE. ie does not recognize this attribute, but display: inline-block triggers layout in IE, so that the inline element has the table disease of the display: inline-block attribute. From the above analysis, it is not difficult to understand why setting the display: inline-block attribute for block elements in IE cannot achieve the effect of inline-block. At this time, the block element is only triggered by the display: inline-block layout, and it is the row layout, so after the triggering, the block element is still the row layout, instead of submitting an inline object as a block element in opera.


For versions earlier than IE8, you can use either of the following methods to implement the inline-block effect:


1. Use the display: inline-block attribute to trigger the block element first, and then define the display: inline, let the block element be presented as an inline object (two displays must be placed in two CSS declarations to achieve the effect, which is a classic bug in IE. If the display: inline-block is defined first, then set the display back to inline or block, and layout will not disappear ). The Code is as follows (... for other omitted attributes ):

Div {display: inline-block ;...}
Div {display: inline ;}


2. Set the block element to inline object submission (set the attribute display: inline), and then trigger the layout of the block element (for example, Zoom: 1 ). The Code is as follows:

Div {display: inline; ZOOM: 1 ;...}

Display: differences between inline, block, and inline-block

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.