Block-level element inline elements in HTML

The last week, the CRM project, most of the use of Js,nodejs,ajax content, but today I would like to write about the HTML block-level elements and inline elements of things.

First, block-level elements in HTML

Inline elements

We can see that there are repeating elements in these two tables, which are called mutable elements

What is the difference between block-level elements and inline elements in HTML?

Block-level elements are displayed on a branch, and inline elements are displayed on the same line

The specific differences are as follows:1. Inline elements in dimension setting

Set it wide, high, both invalid

Set margin value, left and right margin value can be set, upper and lower margin value setting is invalid,

Set the padding value, the left and right padding values can be set, the upper and lower Paddig value settings are invalid

2. Using the Text-align property

This property describes the horizontal alignment of text in the inline content of a block-level element

Special case: In Ie6/ie7/ie8, this property allows block-level elements to be centered, but on other browsers, the property is centered only on the contents of the row.

So what if we want to set block-level elements as inline elements, or set inline elements as accounting elements?

Using the Display property

Display:inline can set block-level elements as inline elements, so that the block-level element has the attributes of the inline element

Similarly: Display:block can set the inline element to a block-level element that has the attributes of a block-level element, setting the width-height, margin, and padding-to-value of the elements.

Block-level element inline elements in HTML