YouTip

## CSS padding-left Property The `padding-left` property sets the width of the padding space required on the left side of an element. This creates internal space between the element's content and its left border. --- ## Quick Example Set a left padding of `2cm` for all `

` elements: ```css p { padding-left: 2cm; } ``` --- ## Definition and Usage The `padding-left` property defines the space between the content of an element and its left border. * **Note:** Negative values are **not** allowed. * **Box Model Impact:** By default, padding increases the total width of the element unless `box-sizing: border-box` is applied. ### Property Specifications | Feature | Description | | :--- | :--- | | **Default Value** | `0` | | **Inherited** | No | | **CSS Version** | CSS1 | | **JavaScript Syntax** | `object.style.paddingLeft = "2cm"` | --- ## Browser Support The numbers in the table specify the first browser version that fully supports the property. | Property | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :---: | :---: | :---: | :---: | :---: | | `padding-left` | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 | --- ## Property Values | Value | Description | | :--- | :--- | | *length* | Specifies a fixed left padding using standard CSS units (e.g., `px`, `pt`, `cm`, `em`, `rem`). The default value is `0px`. | | *%* | Specifies the left padding as a percentage of the **width** of the containing (parent) element. | | `inherit` | Specifies that the left padding should be inherited from the parent element. | --- ## Practical Examples ### Example 1: Using Different Units You can define the left padding using various units such as pixels (`px`), relative units (`em`, `rem`), or percentages (`%`). ```css /* Using pixels */ .box-pixel { padding-left: 20px; } /* Using em (relative to the font size of the element) */ .box-em { padding-left: 1.5em; } /* Using percentage (relative to the parent element's width) */ .box-percent { padding-left: 10%; } ``` ### Example 2: Inheriting Left Padding You can force an element to inherit the exact left padding of its parent container. ```css .parent { padding-left: 30px; } .child { padding-left: inherit; } ``` --- ## Important Considerations ### 1. Percentage Values are Relative to Width When using a percentage (`%`) value for `padding-left`, the percentage is calculated relative to the **width** of the parent container, not its height. This is true for all four padding properties (`padding-top`, `padding-right`, `padding-bottom`, `padding-left`). ### 2. Box Sizing By default, adding padding increases the overall size of the element. If you want the padding to be included within the element's specified width, use `box-sizing: border-box`: ```css .box { width: 300px; padding-left: 50px; box-sizing: border-box; /* The total width remains 300px */ } ``` --- ## Related Articles * CSS Tutorial: (https://www.runoob.com/css/css-padding.html)