Article From:https://www.cnblogs.com/zoulixiang/p/9969928.html
CSS An example of padding
The inner margin of the element is between the border and the content area. The simplest attribute to control the region is the padding attribute.

CSS padding Attributes define the blank area between the element border and the element content.
CSS Padding
Attribute description
padding Short attributes. The function is to set the inner margin property of an element in a declaration.
padding-bottom Set the lower inner margin of the element.
padding-left Set the left inner margin of the element.
padding-right Set the right inner margin of the element.
padding-top Set the upper and inner margins of the element.
###################



1.All populated attributes are in one declaration
This example demonstrates the use of abbreviated attributes to set all fill attributes in a declaration, with one to four values.
<style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
Each edge of this table cell has the same inner margin.
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
The upper and lower inner margins of this table are 0.5 cm, and the left and right inner margins are 2.5 cm.
</td>
</tr>
</table>
</body>

2.Set down the inner margin 1
This example demonstrates how to use centimeter values to set the lower inner margin of a cell.
<style type="text/css">
td{padding-bottom:2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a table unit with an afternoon margin.
</td>
</tr>
</table>

</body>

3.Set down the inner margin 2
This example demonstrates how to use percentage values to set the lower inner margin of a cell.
<style type="text/css">
td{padding-bottom: 10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This table unit has a lower inner margin.
</td>
</tr>
</table>

4.Set left inner margin 1
This example demonstrates how to use centimeter values to set the left margin of a cell.
<style type="text/css">
td{padding-left:2cm
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This table unit has left margin.
</td>
</tr>
</table>

5.Set left inner margin 2
This example demonstrates how to use percentage values to set the left inner margin of a cell.

<style type="text/css">
td{padding-left: 10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This table has a left margin.
</td>
</tr>
</table>

6.Set right inner margin 1
This example demonstrates how to use centimeter values to set the right inner margin of a cell.
<style type="text/css">
td{padding-right:5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This table cell has a right inner margin.
</td>
</tr>
</table>
7.Set right inner margin 2
This example demonstrates how to use percentage values to set the right inner margin of a cell.
<style type="text/css">
td{padding-right:10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This table cell has a right inner margin.
</td>
</tr>
</table>
</body>

8.Set up upper inner margin 1
This example demonstrates how to use centimeter values to set the upper and inner margins of cells.
<style type="text/css">
td{padding-top:2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This table unit has upper and inner margins.
</td>
</tr>
</table>

9.Set up upper inner margin 2
This example demonstrates how to use percentage values to set the upper and inner margins of cells.
<style type="text/css">
td{padding-top:10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This table unit has upper and inner margins.
</td>
</tr>
</table>
</body>

Link of this Article: An example of padding in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *