Detailed explanation of the usage of text-indent in css and the difference between it and padding

Syntax:
text-indent : length

Parameters:

length: Percentage number | A length value composed of a floating point number and a unit identifier , negative values ​​are allowed. See Length Units

Description:

Retrieves or sets the indentation of the text in the object.
This attribute cannot be applied within an object that is disconnected by another object (such as).
The corresponding script feature is textIndent. Please see other books I have written.

Example:

div { text-indent : -5px; } 
div { text-indent : underline 10%; }

How to use text-indent in css
text-indent
indicates the indentation of the first line of text, such as in word The first line of indentation
For example: you want the first line of a text to be indented by 2 Chinese characters. The font size of this text is 12px.
Put it in
Here is your text
The definition is as follows
p{text-indent:25px;}

What is the difference between text-indent and padding in css?

text-indent does not affect the final width of the element, but there are compatibility issues. Padding affects the final width in lower versions of IE, the mainstream browser, but not in chrome and firefox. Affects the width, but the problem of inconsistent display in multiple browsers can be solved through CSS reset, so that they all affect the width in the end.
The basic difference between text-indent and padding:
1. Padding is based on box model, applicable to inline and block level elements
2. Text-indent is based on inline typesetting, only applicable For elements at the block level, the first line of text
padding will be applied to the left padding area of ​​the inline box or block box, which will affect the content-box, and the text sub-nodes will appear in inside the content-box, so all text will be shifted left.
23efcc05e98690ceeb219581933e4231 As an inline-block level label, it is displayed in a fixed single line (and it is different from the white-space mechanism). The above difference does not exist.
So what’s the difference:
1. Text-indent is based on inline typesetting, which results in the application of direction: After rtl, the indent provided by text-indent appears on the right; padding -left is not affected by direction.
Of course, the direction attribute is not commonly used for 23efcc05e98690ceeb219581933e4231
2. The padding-left is based on the box model, so the box-sizing attribute will affect the element together with the padding-left and width attributes. The final width; text-indent will never affect the width of the element.
This is very important because the default style sheets of webkit and firefox will set the box-sizing: border-box of the input element. If you set width and padding-left at the same time, webkit/firefox and IE lower versions will appear. A big difference in width.
Therefore, when using padding-left, you need to reset the corresponding styles of webkit and firefox:

The above is the detailed content of Detailed explanation of the usage of text-indent in css and the difference between it and padding. For more information, please follow other related articles on the PHP Chinese website!