Tag: what is css padding?

CSS Table Padding

Please Share On:

Definition:

CSS table padding property sets the space between table borders and the content of the tables. See the below example of using table padding in a table.

Syntax:

padding: 20px;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse: collapse;
}

table, th, td {
  border: 1px dashed red;
  padding: 20px;
}
</style>
</head>

<body>
<h3>Example of CSS table padding</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
</table>
</body>
</html>

Output:

In the above table, padding is applied to all sides of the table content. If you need padding only into left, right, top or bottom, use the below syntax for specific padding.

padding-left: 20px; /*applies padding only on left side*/
padding-right: 20px; /*applies padding only on right side*/
padding-top: 20px; /*applies padding only on top side*/
padding-bottom: 20px; /*applies padding only on bottom side*/
padding: 20px; /*applies padding on all side together*/

To understand more about CSS Padding, read the CSS Padding Chapter.

You may be interested in the following topics:

CSS Padding

Please Share On:

Definition:

The CSS padding property is used to put a space between the elements and inside the defined borders. “Padding” property is the shorthand property of all four individual padding properties. i.e,

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

Syntax:

padding: 10px;

Padding Property Values

Padding property values can have 1, 2 , 3 and 4 values.

  1. If you have one padding property value, then the padding applies to all four sides.

Syntax:

.paragraph
{
padding: 10px;
}

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
  border: 2px dashed red;
  background-color: pink;
  text-align:center;
  padding: 10px;
}
</style>
</head>

<body>
<div class="paragraph">This element has 10px equal padding in four sides. The padding is added inside the defined border.</div>

</body>
</html>

Output:

2. If you have two padding property values, the first value applies top and bottom paddings, and the second value applies left and right paddings.

Syntax:

.paragraph
{
padding: 10px 20px;
}

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
  border: 2px dashed red;
  background-color: pink;
  text-align:center;
  padding: 10px 20px;
}
</style>
</head>

<body>
<div class="paragraph">Top and Bottom paddings are 10px <br/> Left and Right paddings are 20px.</div>

</body>
</html>

Output:

3. If you have three padding property values, the first value applies top padding, the second value applies left and right paddings and the third value applies to bottom padding.

Syntax:

.paragraph
{
padding: 10px 20px 5px;
}

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
  border: 2px dashed red;
  background-color: pink;
  text-align:center;
  padding: 10px 20px 5px;
}
</style>
</head>
 
<body>
<div class="paragraph">Top Margin is 10px; <br/> Left and Right margins are 20px;<br/> Bottom margin is 5px;</div>
 
</body>
</html>

Output:

4. If you have four padding property values, then the first value applies to top padding, the second value applies to right padding, the third value applies to bottom padding and the fourth value applies to left padding.

Syntax:

.paragraph
{
padding: 10px 20px 15px 10px;
}

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
  border: 2px dashed red;
  background-color: pink;
  text-align:center;
  padding: 10px 20px 15px 10px;
}
</style>
</head>

<body>
<div class="paragraph">Top Margin is 10px; <br/> Right margin is 20px;<br/> Bottom margin is 15px; <br/> Left margin is 10px;</div>
 
</body>
</html>

Output:

You may be interested in the following topics:

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial