PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Table of Contents

CSS Padding

The CSS padding property is used to add space inside an element or around the content of the element. Take a quick look at the following example.

If we apply the following CSS:

.box{
    padding: 50px;
    background: blue;
    color: white;
}

To the following element:

<div class="box">CSS Padding Example</div>

We would end up with the following result:

CSS padding property

And as you can see we have a padding of 50 pixels inside of the element and around the content.

CSS padding works the same way as CSS margins. If we specify 1 value it will add the padding to all sides of our element. Specifying 2 values will add the padding to the top-bottom and left-right, finally 4 values will apply padding to the top, right, bottom, and left side respectively.

Next, let’s move on to talking about the CSS width and height properties.