CSS Paddings

Padding Basics

The padding property controls spacing inside the element, between its content and border.

div {
  padding: 20px;
}

Individual Sides

You can target each side of the box separately:

div {
  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 15px;
  padding-left: 30px;
}

Padding Shorthand

Instead of writing each side's padding individually, you can use shorthand to save space:

• padding: 10px; – sets all four sides to 10px
• padding: 10px 20px; – top & bottom = 10px, left & right = 20px
• padding: 10px 20px 30px; – top = 10px, left & right = 20px, bottom = 30px
• padding: 10px 15px 20px 25px; – top = 10px, right = 15px, bottom = 20px, left = 25px

Example:

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

Box Sizing Consideration

Padding affects the total size of an element unless you use box-sizing: border-box, which keeps width/height fixed.

div {
  width: 300px;
  padding: 20px;
  box-sizing: border-box;
}

Practice Prompt

Try creating a <div> with these styles:

<div style={{
  width: "250px",
  padding: "25px 15px 15px 15px",
  boxSizing: "border-box",
  backgroundColor: "#f9f9f9",
  border: "1px solid #ccc"
}}>
  This box has top padding of 25px and 15px on the other sides.
</div>

You can copy and paste this code in your IDE to run!

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic