Inline elements的一些事

Inline elements的定义

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). Several values of the ‘display’ property make an element inline: ‘inline’, ‘inline-table’, ‘inline-block’ and ‘run-in’ (part of the time; see run-in boxes). Inline-level elements generate inline boxes.

replaced elements and non-replaced elements

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its “src” attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).

User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed intrinsic size depending on the user’s bank balance, then the UA might want to act as if that resource had no intrinsic dimensions.

replaced elements的大概意思是那些有自己尺寸和比例的元素,比如img有自己的宽和高。img,input,textarea,select,object这些都是replaced elements,除了它们别的元素就是non-replaced elements。

Inline elements的宽和高

对于non-replaced的inline元素,设置width和height是没有作用的,不过此类元素的高度可以由line-height来指定。

Inline elements的padding和margin

对于non-replaced的inline元素,padding和margin作用方式是一样的,margin和padding只会在左右两个方向起到实际作用。如下面的例子,将a元素的padding设置了50px,只在左右留出了空白。

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

发表评论