【开源】前端开发常识集锦

HTML部分

①  text-indent 仅对block级容器有效

16.1 Indentation: the ‘text-indent’ property

‘text-indent’
Value: <length> | <percentage> | inherit
Initial: 0
Applies to: block containers
Inherited: yes
Percentages: refer to width of containing block
Media: visual
Computed value: the percentage as specified or the absolute length

This property specifies the indentation of the first line of text in a block container. More precisely, it specifies the indentation of the first box that flows into the block’s first line box. The box is indented with respect to the left (or right, for right-to-left layout) edge of the line box. User agents must render this indentation as blank space.

‘Text-indent’ only affects a line if it is the first formatted line of an element. For example, the first line of an anonymous block box is only affected if it is the first child of its parent element.

Values have the following meanings:

<length>
The indentation is a fixed length.
<percentage>
The indentation is a percentage of the containing block width.

The value of ‘text-indent’ may be negative, but there may be implementation-specific limits. If the value of ‘text-indent’ is either negative or exceeds the width of the block, that first box, described above, can overflow the block. The value of ‘overflow’ will affect whether such text that overflows the block is visible.

The following example causes a ‘3em’ text indent.

 p { text-indent: 3em } 

Note: Since the ‘text-indent’ property inherits, when specified on a block element, it will affect descendant inline-block elements. For this reason, it is often wise to specify ‘text-indent: 0‘ on elements that are specified ‘display:inline-block‘.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

five × 1 =