CSS Padding

CSS CODES & EXAMPLES

CSS Padding

Learn how to control the space inside HTML elements using CSS padding. Understand individual padding sides, shorthand values, responsive spacing, box sizing and practical website layouts.

← CSS Margins Start Learning →

What is CSS Padding?

Control the space inside an element

CSS padding creates space between an element’s content and its border. Unlike margin, which creates space outside an element, padding creates space inside the element.

Important Properties:padding padding-top padding-right padding-bottom padding-left

Basic Padding

Add equal space on all four sides

basic-padding.css

.box {
  padding: 30px;
}

padding: 30px

Individual Padding Sides

Control each side independently

You can define padding separately for the top, right, bottom and left sides.

individual-padding.css

.box {
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 50px;
}

TOP
20px

RIGHT
30px

BOTTOM
40px

LEFT
50px

CONTENT

Padding Shorthand — Two Values

Vertical and horizontal padding

padding-two-values.css

.box {
  padding: 20px 40px;
}

20px Top & Bottom

40px Left & Right

With two values, the first value applies to top and bottom, while the second applies to left and right.

Padding Shorthand — Three Values

Top, horizontal and bottom padding

padding-three-values.css

.box {
  padding: 10px 30px 50px;
}

10pxTop

30pxLeft & Right

50pxBottom

Padding Shorthand — Four Values

Set all four sides in one declaration

Padding vs Margin

Understand the difference

Padding

Creates space inside the element, between content and border.


padding: 20px;

Margin

Creates space outside the element, separating it from other elements.


margin: 20px;

Padding and the CSS Box Model

Understand content, padding, border and margin

Margin

Border

Padding

Content

box-model.css

.box {
  width: 300px;
  padding: 30px;
  border: 5px solid #1769d5;
  margin: 20px;
}

box-sizing: border-box

Make layouts easier to control

By default, padding and border can increase the rendered size of an element. With box-sizing: border-box;, the declared width and height include the padding and border.

border-box.css

* {
  box-sizing: border-box;
}

.box {
  width: 300px;
  padding: 30px;
  border: 5px solid #1769d5;
}

300px Width

Padding Included

Padding in Buttons

Create comfortable clickable areas

button-padding.css

.btn {
  padding: 12px 24px;
  background: #1769d5;
  color: white;
  border-radius: 8px;
}

Enroll Now View Course Contact Us

Padding in Cards

Create clean content spacing

card-padding.css

.card {
  padding: 25px;
  border: 1px solid #e1e7ef;
  border-radius: 15px;
}

Computer Fundamentals

Learn computer basics, hardware, software, memory and operating systems.

Learn More →

Web Designing

Learn HTML, CSS and responsive website development with practical examples.

Learn More →

Microsoft Excel

Learn spreadsheets, formulas, functions and professional data management.

Padding in Navigation

Improve navigation links and clickable areas

navigation-padding.css

.nav-link {
  padding: 10px 15px;
  text-decoration: none;
}

SNCEC

Home Courses About Contact

Responsive Padding

Adjust inner spacing for mobile devices

responsive-padding.css

.section {
  padding: 60px 30px;
}

@media (max-width: 600px) {
  .section {
    padding: 35px 15px;
  }
}

Desktop Padding

Mobile Padding

Padding with Percentage

Use percentage values for flexible spacing

percentage-padding.css

.box {
  padding: 5%;
}

padding: 5%

Padding with CSS Variables

Create reusable spacing values

padding-variable.css

:root {
  --space: 25px;
}

.card {
  padding: var(--space);
}

–space: 25px

Reusable Spacing

CSS variables make spacing systems easier to maintain.

CSS Padding Live Preview

Run a complete padding example

LIVE PREVIEW

CSS Padding Quick Reference

Important properties at a glance

Property	Example	Purpose
padding	`padding: 20px;`	Set padding on all sides
padding-top	`padding-top: 20px;`	Space inside at the top
padding-right	`padding-right: 20px;`	Space inside on the right
padding-bottom	`padding-bottom: 20px;`	Space inside at the bottom
padding-left	`padding-left: 20px;`	Space inside on the left
box-sizing	`box-sizing: border-box;`	Include padding and border in size
Responsive Padding	`@media (...)`	Change spacing on smaller screens