HTML CSS SQL Meta tag Generator ScrollBar design Generator Encode Decode images

CSS Basics

Introduction Syntax Selectors Attribute Selectors Specificity Combinators !important Comments Colors

CSS Need to Know

Box Model Pseudo-class Pseudo-element Inline-block Math Functions Max and Min Opacity Outline Overflow Z-index Float

Most used

Align Backgrounds Borders Text Units Padding Margins Position Tables Display Fonts Lists Height and Width

CSS Reference

CSS Properties reference CSS Pseudo-Classes reference CSS Pseudo-Elements reference CSS Selector reference

CSS padding

The CSS padding property is used to create space around an element's content, inside the border of the element. It can be used to add spacing between the content of an element and its border. The padding can be set in different units such as pixels, ems, rems, or percentages.

The syntax for setting padding in CSS is:


selector {
  padding: value;
}

Where selector is the HTML element you want to style, and value can be a single value for all sides or separate values for each side (top, right, bottom, left).

Here is an example of setting padding to 20 pixels on all sides of a paragraph element:

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

In the example above, the padding of 20 pixels is applied to all sides of the paragraph element.

If you want to set different padding values for each side, you can specify them in the following order: top, right, bottom, left. For example:


selector {
  padding: 10px 20px 15px 25px;
}

This will set the padding to 10 pixels on the top, 20 pixels on the right, 15 pixels on the bottom, and 25 pixels on the left.

Padding is useful for creating spacing between elements on a webpage and improving the overall layout and design.

<i>Tower of Pisa</i>