Text-indent usage in CSS and the differences with padding

Grammar:
Text-indent:length

Parameters:

Length: Percent number | A value of length, consisting of floating-point numbers and unit identifiers, that is allowed to be negative. See Length Units

Description

Retrieves or sets the indentation of text in an object.
This property cannot be applied within an object that is broken by another object, such as.
The corresponding script attribute is textindent. Please refer to the other bibliography I have written.

Example:

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

How to use text-indent in CSS
Text-indent
Represents the first line of text indentation, like the first line indent in Word
For example: you want to indent 2 Chinese characters in the first line of text, the font size is 12px,
Put in
Here is your text
Defined as follows
p{text-indent:25px;}

text-indent does not affect the final width of the element but has compatibility issues, padding in the main browser ie lower version of the final width, but in Chrome and Firefox does not affect the width, However, CSS reset can be used to solve the problem of multi-browser display, so that they eventually affect the width. The basic differences between the
Text-indent and padding:
1, padding-based box model, for inline and block-level elements
2, text-indent based on inline layout, only applies to block-level elements, The inner first line of the element that acts on the block level
padding acts on the left padding area of the inline box or block box, affects Content-box, and text subnodes appear inside the Content-box. So all text moves to the left.
<input type= "text" > as a Inline-block-level label, which is a fixed single-line display (and not the same as the white-space mechanism), the differences described above do not exist.
So what's the difference:
1, Text-indent is based on inline typesetting, resulting in the indent that Text-indent provides appears on the right after Direction:rtl is applied, and padding-left is not affected by direction.
Of course, direction this property is not commonly used in <input type= "text";
2, Padding-left based on the box model, so the box-sizing attribute will be padding-left, The Width property affects the final width of the element together, while text-indent always does not affect the width of the element.
This is important because the default style table for WebKit and Firefox sets the input element's box-sizing:border-box, and if you set both width and padding-left, the webkit/ The large width difference between Firefox and IE's lower version.
Therefore, when you use Padding-left, you need to reset the corresponding styles for WebKit and Firefox: