The difference between inline and block-level elements is described in detail

First, the CSS specification specifies that each element has a display property, determines the type of the element, and each element has a default display value, block-level, inline (inline).

Block-level elements: (The following list of more commonly used block-level elements, details can be found in W3cschool query)

<p> define a partition or section in a document   

Inline elements: (The following lists the more commonly used inline elements, details can be found in the W3cschool query)

<a> define Hyperlinks   <b> font bold   <span> define inline elements in a document    insert a title image into a Web page   <input> input Box   <small> Small font effects   <br> line wrapping   <big> font enlargement   <strong> accent Tone   <select> Create a single or multiple-selection menu   <textarea> define text fields, multiple lines of text input controls

The difference between an inline element and a block-level element:

1. Inline elements and block-level functions can be converted to each other by modifying the display property values to toggle block-level elements and inline elements, inline element Display:inline, and block-level element Display:block.

2. Inline elements and other inline elements will be arranged on a horizontal line, all in the same row;

Block-level elements are always arranged on a new line, with each block-level element exclusive of one row, arranged vertically, and left-and-right (float:left/right) to align horizontally if you want to sort horizontally.

3. Inline elements can not be set wide, width height varies with the text content, but can set the line height (line-height), while setting margin margin is invalid, left and right, the inner padding padding up and down invalid, right and left effective;

Block-level elements can be set wide, and width height and margin, inner padding can be arbitrarily controlled.

4. Block-level elements can include inline and block-level elements, as well as inline elements and other elements;

Inline elements cannot contain block-level elements, only text or other inline elements.

 Above this comprehensive understanding of the line elements and block-level elements of the difference is the small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.