CSS Padding — TutorialBrain

CSS Padding Examples

Here, the values of padding are- padding-top:0;padding-right:50px;padding-bottom:0; padding-left:0;

padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;

padding-top:0;padding-right:0;padding-bottom:0;
padding-left:0;

There is no padding in all the sides.

With Padding and without Padding

heading 4 without padding

heading 4 with padding - You can see that there are extra spaces around the element’s content inside the fixed boundary

Follow @tutorial_brain

What is CSS Padding?

Padding in CSS is the transparent area between the outer edge of the element and the inner edge of the border.

In simple words, Padding is the space around the element.

Use padding to set up a border around the HTML elements and the border in the box model.

Using CSS padding property, you can specify the padding at top, right, bottom and left side around the element.

Padding has 4 sides –

padding-top – Padding-top is the top padding of an element.
padding-right – Padding-right is the right padding of an element.
padding-bottom– Padding-bottom is the bottom padding of an element.
padding-left– Padding-left is the left padding of an element.

There are 2 ways to set the padding:

Using shorthand padding property
Using the individual property of padding-top, padding-right, padding-bottom, and padding-left

Let’s see both of these in detail.

Shorthand Syntax of CSS-padding:

padding: units|initial|inherit;

Where units can take values in units like px, em, length, % etc.

This syntax sets the values of padding-top, padding-bottom,padding-right and padding-left at the same time.

Example to use shorthand padding property

<style>
  .padding_shorthand1 {
     border:3px solid powderblue;
     padding: 5px;
}

  .padding_shorthand2 {
     border:3px solid orange;
     padding: 20px 10px;
}

  .padding_shorthand3 {
     border:3px solid pink;
     padding: 30px 10px 20px;
}

  .padding_shorthand4 {
     border:3px solid aqua;
     padding: 0 15px 20px 5px;
}
</style>

If padding has 1 value.

For Example:
padding: 10px;

then, the top, right, bottom, and left padding is 10px each.

If padding has 2 values.

For Example:
padding: 0.5em 1em;

then, the top and bottom padding are 0.5em each, while the right and left padding are 1em each.

If padding has 3 values.

For Example:
padding: 5px 3px 8px;

then, the top padding is 5px, the right and left padding is 3px, and the bottom padding is 8px.

If padding has 4 values.

For Example:
padding: 10px 2em 15px 5px;

then, the top padding is 10px, the right padding is 2em, the bottom padding is 15px, and the left padding is 5px.

How to acquire the padding from the parent element

The keyword ‘inherit’ acquires the properties from its parent. To get the parent properties related to padding, you can use: padding:inherit;

How to automatically calculate the padding?

If we use the value of padding as ‘auto’, then the browser automatically calculates the padding.

The syntax is :

padding:auto;

Follow @tutorial_brain

Where, units can take values in units like px, em, length, % etc.

Example to use individual padding property

<style>
  .padding_individual1 {
     border:10px solid orange;
     padding-top: 1em;
	 padding-bottom:2em;	 
	 padding-left: 50px;
}

  .padding_individual2 {
     border:5px dashed tomato;
	 padding-right: 60px;
}
</style>

CSS Interview Question and Answers

1. What is padding in CSS?

In CSS, Padding Property is used to give space around the content of an element.
Syntax:

padding: 5px;

2. Difference between Padding and Margin in CSS.

Padding	Margin
Padding is space between the outer edge of the content to the inner edge of the border.	The margin is the space between the outer edge of the border to the inner edge of the margin itself.
Syntax:	Syntax:
padding: 5px;	Margin :15px;
Internal to the element.	External to the element.
Padding also sets the width and height of the element.	Margin will not set any dimensions of the element.
Padding can’t use auto unit value.	We can set the auto unit value to margins.

3. What are CSS Padding properties?

CSS Padding properties are:

padding-top
padding-right
padding-bottom
padding-left

4. Syntax for CSS Padding shorthand property

padding:50px; (Value for all four paddings).

padding:50px 80px; (top&bottom right&left) – If padding has 2 values.

padding:50px 80px 60px; (top right&left bottom) – If padding has 3 values.

padding:50px 80px 60px 45px; (top right bottom left) – If padding has 4 values.