An introduction to the differences between elements and block-level elements in CSS rows

This article mainly introduces the difference between the element and the block level element in the line, it has a good reference value, below the small series to see it together

One, the difference between the inline element and the block-level element

1, the line elements will not occupy the whole line, in a straight line, are the same row, horizontal direction;

Block-level elements occupy a row and are arranged in a vertical direction.

2. Block-level elements can contain inline elements and block-level elements, and inline elements cannot contain block-level elements.

3, the line element and block-level element attributes are different, mainly box model properties, the element set width is invalid, height is invalid (can be set line-height), margin is invalid, padding up and down invalid.

Two, the conversion of elements in the line and block-level elements

In-line elements into block elements: display:block;

Block elements into inline elements: display:inline;

Iii. extension of the problem

Question Description: Why are inline elements, such as IMG, input, set wide, high?

Detailed Answer:

Elements are the basis of a document's structure, and in CSS, each element generates a box containing the contents of the Element (box, also translated as "box"). But different elements are displayed differently, such as <p> and <span>

It's different, and <strong> and <p> are not the same. Different types are prescribed for different elements in a document type definition (DTD), which is one of the reasons why a DTD is important to a document.

　1. Replacement and non-replaceable elements

From the characteristics of the elements themselves, can be divided into replacement and non-replaceable elements.

　　a) Replace element

The replacement element is that the browser determines the specific display of the element based on the tag and attributes of the element.

For example, the browser will read the image information according to the value of the SRC attribute of the tag and display it, and if you view the (X) HTML code, you cannot see the actual contents of the picture, or, for example, according to the Type property of the <input> tag

Decide whether to display an input box, a radio button, and so on.

X , <input>, <textarea>, <select>, <object> in HTML are all replacement elements. These elements often have no actual content, which is an empty element, such as:

 <input type= "Submit" name= "submit" value= "Submit"/>

The browser displays these elements based on the label type and attributes of the element. The replaceable element also generates a box in its display.

B) Non-replaceable elements

X Most elements of HTML are non-replaceable elements, meaning that their content is displayed directly to the client (for example, a browser). For example:

<p> content of the paragraph </p>

Paragraph <p> is a non-replaceable element, the text "paragraph content" is all displayed.

　　2. Display elements

In addition to the classification of replaceable and non-replaceable elements, elements in CSS 2.1 have different classifications: block-level elements (block-level) and inline elements (Inline-level, also translated as "inline" elements).

　　A) block-level elements

The most obvious feature of an element that is visually formatted as a block is that it fills the content area of its parent element horizontally by default, and there are no other elements on either side of it, that is, block-level elements are exclusive by default.

Typical block-level elements are:<p>, <p>,

The float (float property, float left or right) is set by CSS, and the setting display property for "block" or "List-item" is a block-level element.

However, floating elements are special, and because of the float, there may be other elements next to them. The "List-item" (list item <li>) generates a dot symbol, or a number ordinal, in front of it.

B) in-line elements

Inline elements do not form new chunks of content, that is, they can have other elements around them, such as <a>, <span>, <strong>, and so on, are typical inline-level elements.

Elements with the display property equal to "inline" are all inline elements. Almost all of the replaceable elements are inline elements, such as , <input>, and so on.

However, the type of the element is not fixed, by setting the display property of the CSS, you can make the inline element into a block-level element, or you can make the block-level element into an inline element.

3. Conclusion:

The replacement element generally has an intrinsic size, so it has width and height, which can be set. For example, when you do not specify the width and height of IMG, it is displayed in its intrinsic size, which is the width and height of the image when it is saved.

For form elements, the browser also has a default style, including width and height.