HTML block-level elements and inline elements

Most of what we often use HTML elements, which are defined as block-level elements or inline elements.

block elements, generally starts from the new line, it can accommodate inline elements and other block elements

Inline Elements Are generally based on the semantic level (semantic) the basic elements. Inline elements can only hold text or other inline elements; There is also a special element.

variable Element , a mutable element is a block element or an inline element that determines whether the element is based on contextual context.

Common block elements are:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/59/5D/wKiom1TQ0FXgpZRGAAMfsWLPMDs549.jpg "title=" Image 4. JPG "alt=" wkiom1tq0fxgpzrgaamfswlpmds549.jpg "/>

The common inline elements are:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/59/5D/wKiom1TQ0IqB187EAAKiBzo7TPQ499.jpg "title=" image 5. JPG "alt=" wkiom1tq0iqb187eaakibzo7tpq499.jpg "/>

Variable elements:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/59/59/wKioL1TQ0aGz3h1gAADvla_Kp8A761.jpg "title=" image 6. JPG "alt=" wkiol1tq0agz3h1gaadvla_kp8a761.jpg "/>

Difference:

Block-level elements will have a single row, and the width automatically fills the width of its parent element by default

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

Block-level elements can be set to a wide height

The inline element cannot be set to a wide height

block-level elements can be set margin , padding

the horizontal direction of the element in the row margin-left;margin-right; padding-left; padding-right ; can take effect. But the vertical direction of the margin-bottom;margin-top; padding-top; Padding-bottom ; but not in force.

block-level elements Display Properties, Display:block;

block-level elements Display Properties, Display:inline;

in the actual scenario, of course, we can modify the Display property to toggle block-level elements and inline elements

However, some inline elements of a table have the attributes of a block element, as I'll explain in the next blog post.

Reference blog:

Http://www.w3school.com.cn/html/html_blocks.asp

http://blog.csdn.net/yuyanqiao/article/details/8558118

Http://www.educity.cn/wenda/9802.html

http://cyf0110.iteye.com/blog/1814056

This article is from the "7439523" blog, please be sure to keep this source http://7449523.blog.51cto.com/7439523/1611278

HTML block-level elements and inline elements