CSS padding-left Property
Padding is the space between its content and its border. The padding-left property in CSS is used to set the width of the padding area on the left of an element.
Syntax:
padding-left: length|percentage|initial|inherit;
Property values;
- length: This mode is used to specify the size of padding as a fixed value. The default value is 0. It must be non-negative.
Syntax:
padding-left: length;
Example 1:
html
<!DOCTYPE html> <html> <head> <title> padding-left Property </title> <style> .geek { padding-left: 90px; color: white; background: green; } </style> </head> <body> <h1 style = "color: green; text-align:center"> GeeksforGeeks </h1> <h2 style = "text-align:center"> padding-left Property </h2> <!-- padding-left property used here --> <p class="geek"> This paragraph has a padding-left: 90px; </p> </body> </html> |
Output:
- percentage: This mode is used to specify the left padding in percent of the width of the element. It must be non-negative.
Syntax:
padding-left: percentage;
Example 2:
html
<!DOCTYPE html> <html> <head> <title> padding-left Property </title> <style> .geek { padding-left: 25%; color: white; background: green; } </style> </head> <body> <h1 style = "color: green; text-align:center"> GeeksforGeeks </h1> <h2 style = "text-align:center"> padding-left Property </h2> <!-- padding-left property used here --> <p class = "geek"> This paragraph has a padding-left: 25%; </p> </body> </html> |
Output:
- initial: This property is used to set padding-left to its default value.
Syntax:
padding-left: initial;
Supported Browsers: The browser supported by padding-left property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Apple Safari 1.0 and above
Please Login to comment...