Categories
CSS Web development

CSS padding Property

CSS padding Property

The space between the content and its border is named padding.

The margin creates the space around an element, while the padding creates space within an element.

The CSS padding property is a shorthand property for the following properties:

Syntax:

padding: length;

length defines fixed padding in px, cm, etc.

The CSS padding property can have from one to four values:

If the padding property has four values:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  border: 1px solid #333; 
  padding: 45px 80px 60px 100px;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 45px padding for top, a 80px padding for right, a 60px padding for bottom, and a 100px padding for left.</p>

</body>
</html>

Output:

Top padding is 45px, right padding is 80px, bottom padding is 60px and left padding is 100px:

This paragraph has a 45px padding for top, a 80px padding for right, a 60px padding for bottom, and a 100px padding for left.


If the padding property has three values:

<!DOCTYPE html>
<html>
<head>
<style>
.ex2 {
  border: 1px solid #333; 
  padding: 45px 80px 60px;
}
</style>
</head>
<body>

<p class="ex2">This paragraph has a 45px padding for top, a 80px padding for right and left, and a 60px padding for bottom.</p>

</body>
</html>

Output:

Top padding is 45px, right and left padding are 80px, and bottom padding is 60px:

This paragraph has a 45px padding for top, a 80px padding for right and left, and a 60px padding for bottom.


If the padding property has two values:

<!DOCTYPE html>
<html>
<head>
<style>
.ex3 {
  border: 1px solid #333; 
  padding: 45px 80px;
}
</style>
</head>
<body>

<p class="ex3">This paragraph has a 45px padding for top and bottom, and a 80px padding for right and left.</p>

</body>
</html>

Output:

Top and bottom padding are 45px, right and left are 80px:

This paragraph has a 45px padding for top and bottom, and a 80px padding for right and left.


If the padding property has one value:

<!DOCTYPE html>
<html>
<head>
<style>
.ex4 {
  border: 1px solid #333; 
  padding: 25px;
}

</style>
</head>
<body>

<p class="ex4">This paragraph has a padding of 25px on all four sides.</p>

</body>
</html>

Output:

All four paddings are 25px:

This paragraph has a padding of 25px on all four sides.


Enjoy coding!

Read also:

CSS margin Property

CSS border Property

Categories
CSS Web development

CSS padding-right Property

CSS padding-right Property

The space between the content and its border is named padding.

The CSS padding-right property settles the right padding (right space) of an element.

Demo:

Click the “Try it” button to change the padding-right property of the paragraph (100px):



Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat…


Syntax:

padding-right: length;

length – defines fixed right padding in px, cm, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  border: 1px solid #333; 
  padding-right: 200px;
}
</style>
</head>
<body>

<p class="ex1">This is a paragraph with a 250px right padding.This is a paragraph with a 250px right padding.This is a paragraph with a 200px right padding.</p>

</body>
</html>

Output:

This is a paragraph with a 250px right padding.This is a paragraph with a 250px right padding.This is a paragraph with a 200px right padding.


Enjoy coding!

Read also:

CSS margin-right Property

CSS border-right Property

CSS font-style Property

Categories
CSS Web development

CSS padding-left Property

CSS padding-left Property

The space between the content and its border is named padding.

The CSS padding-left property settles the left padding (left space) of an element.

Demo:

Click the “Try it” button to change the padding-left property of the paragraph (45px):



This is a paragraph.


Syntax:

padding-left: length;

length – defines fixed left padding in px, cm, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid #333; 
  padding-left: 60px;
}
</style>
</head>
<body>

<p class="ex1">This is a paragrpah with a 60px left padding.</p>

</body>
</html>

Output:

This is a paragrpah with a 60px left padding.


Enjoy coding!

Read also:

CSS margin-left Property

CSS border-left Property

CSS column-rule-color Property

Categories
CSS Web development

CSS padding-bottom Property

CSS padding-bottom Property

The space between the content and its border is named padding.

The CSS padding-bottom property settles the bottom padding (bottom space) of an element.

Demo:

Click the “Try it” button to change the padding-bottom property of the paragraph:



This is a paragraph.


Syntax:

padding-bottom: length;

length – defines fixed bottom padding in px, cm, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid #333; 
  padding-bottom: 15px;
}
</style>
</head>
<body>

<p class="ex1">This is a paragraph with a 15px bottom padding.</p>

</body>
</html>

Output:

This is a paragraph with a 15px bottom padding.


Enjoy coding!

Read also:

CSS margin-bottom Property

CSS border-bottom Property

CSS Outline

Categories
CSS Web development

CSS padding-top Property

CSS padding-top Property

The space between the content and its border is named padding.

The CSS padding-top property settles the top padding (top space) of an element.

Demo:

Click the “Try it” button to change the padding-top property of the paragraph (45px):



This is a paragraph.


Syntax:

padding-top: length;

length – defines fixed top padding in px, cm, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  border: 1px solid #333; 
  padding-top: 15px;
}
</style>
</head>
<body>

<p class="ex1">This is a paragraph with a 15px top padding.</p>

</body>
</html>

Output:

This is a paragraph with a 15px top padding.

Enjoy coding!

Read also:

CSS margin-top Property

CSS border-top Property

CSS clear Property

Categories
CSS Web development

CSS margin Property

CSS margin Property

The CSS margin property settles the margins for an element.

The margin creates the space around an element, while the padding creates space within an element.

The CSS margin property is a shorthand property for the following properties:

Syntax:

margin: auto|length;

auto – the browser calculates a margin.

length – defines a fixed margin in px, cm, etc.

The CSS margin property can have from one to four values:

If the margin property has four values:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  margin: 40px 70px 30px 100px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p class="ex1">This paragraph has a 40px margin for top, a 70px margin for right, a 30px margin for bottom, and a 100px margin for left.</p>
<p>This is a paragraph.</p>

</body>
</html>

Output:

Top margin is 40px, right margin is 70px, bottom margin is 30px and left margin is 100px.

This is a paragraph.

This paragraph has a 40px margin for top, a 70px margin for right, a 30px margin for bottom, and a 100px margin for left.

This is a paragraph.


If the margin property has three values:

<!DOCTYPE html>
<html>
<head>
<style>
.ex2 {
  margin: 45px 80px 60px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p class="ex2">This paragraph has a 45px margin for top, a 80px margin for right and left, and a 60px margin for bottom.</p>
<p>This is a paragraph.</p>

</body>
</html>

Output:

Top margin is 45px, right and left margins are 80px, and bottom margin is 60px:

This is a paragraph.

This paragraph has a 45px margin for top, a 80px margin for right and left, and a 60px margin for bottom.

This is a paragraph.


If the margin property has two values:

<!DOCTYPE html>
<html>
<head>
<style>

.ex3 {
  margin: 30px 10px;
}

</style>
</head>
<body>

<p>This is a paragraph.</p>
<p class="ex3">A paragraph with a top and bottom margin of 30px and a right and left margin of 10px.</p>
<p>This is a paragraph.</p>

</body>
</html>

Output:

Top and bottom margins are 30px, right and left margins are 10px:

This is a paragraph.

A paragraph with a top and bottom margin of 30px and a right and left margin of 10px.

This is a paragraph.


If the margin property has one value:

<!DOCTYPE html>
<html>
<head>
<style>
.ex4 {
  margin: 55px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p class="ex4">This paragraph has a margin of 55px on all four sides.</p>
<p>This is a paragraph.</p>

</body>
</html>

Output:

All four margins are 55px:

This is a paragraph.

This paragraph has a margin of 55px on all four sides.

This is a paragraph.


Enjoy coding!

Read also:

CSS animation Property

CSS border Property

Categories
CSS Web development

CSS margin-right Property

CSS margin-right Property

The CSS margin-right property settles the right margin of an element.

Demo:

Click the “Try it” button to change the right margin of the paragraph (50px):



This is my DIV element.


Syntax:

margin-right: auto|length;

auto – the browser calculates the right margin.

length – defines a fixed right margin in px, cm, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  margin-right: 200px;
}
</style>
</head>
<body>


<p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>
<p class="ex1">This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.</p>
<p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.

This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.


Read also:

CSS backface-visibility Property

CSS border-right Property

CSS bottom Property

Categories
CSS Web development

CSS margin-left Property

CSS margin-left Property

The CSS margin-left property settles the left margin of an element.

Demo:

Click the “Try it” button to change the left margin of the paragraph:



This is a paragraph.


Syntax:

margin-left: auto|length;

auto – the browser calculates the left margin.

length – defines a fixed left margin in px, cm, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  margin-left: 40px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p class="ex1">This is a paragraph with a 40pixels left margin.</p>
<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

This is a paragraph with a 40pixels left margin.

This is a paragraph.


Enjoy coding!

Read also:

CSS animation-delay Property

CSS border-left Property

CSS Columns property

Categories
CSS Web development

CSS margin-bottom Property

CSS margin-bottom Property

The CSS margin-bottom property settles the bottom margin of an element.

Demo:

Click the “Try it” button to change the bottom margin of the paragraph (50px):

This is a paragraph.


Syntax:

margin-bottom: auto|length;

auto – the browser calculates a bottom margin.

length – defines a fixed bottom margin in px, cm, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  margin-bottom: 45px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p class="ex1">This is a paragraph with a 45px bottom margin.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

This is a paragraph with a 45px bottom margin.

This is a paragraph.

This is a paragraph.


Enjoy coding!

Read also:

CSS border-bottom Property

CSS column-count Property

CSS Filter Property

Categories
CSS Web development

CSS margin-top Property

CSS margin-top Property

The CSS margin-top property settles the top margin of an element.

Demo:

Click the “Try it” button to change the top margin of the paragraph (50px):



This is a paragraph.

Syntax:

margin-top: auto|length;

auto – the browser calculates a top margin.

length – defines a fixed top margin in px, cm, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  margin-top: -15px;
}
.ex2 {
  margin-top: 25px;
}
</style>
</head>
<body>

<p>This is a praragraph.</p>
<p class="ex1">This a paragraph with a -15px top margin.</p>
<p>This is a paragraph.</p>
<p class="ex2">This a paragraph with a 25px top margin.</p>
<p>This is a praragraph.</p>

</body>
</html>

Output:

This is a praragraph.

This a paragraph with a -15px top margin.

This is a paragraph.

This a paragraph with a 25px top margin.

This is a praragraph.

Enjoy coding!

Read also:

CSS border-top Property

CSS Columns Property

CSS flex Property