极客教程CSS 一段文字在表格内带内边距
在网页设计中，表格是一种常用的布局方式，而在表格中显示文字时，我们通常希望文字能够有一定的内边距，以增加文字与表格边框之间的间距，使得页面看起来更加美观。本文将介绍如何使用CSS为表格中的文字添加内边距。
1. 使用padding属性为表格中的文字添加内边距
在CSS中，我们可以使用padding属性为元素的内边距设置值。通过为表格中的单元格（td或th）添加padding属性，可以为表格中的文字添加内边距。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
在上面的示例代码中，我们为表格中的th和td元素添加了padding: 10px;属性，设置了10像素的内边距。运行该代码，可以看到表格中的文字与表格边框之间有一定的间距。
2. 使用padding-top、padding-right、padding-bottom、padding-left分别设置上、右、下、左内边距
除了直接使用padding属性设置统一的内边距外，我们还可以使用padding-top、padding-right、padding-bottom、padding-left分别设置上、右、下、左的内边距值。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
在上面的示例代码中，我们分别为表格中的单元格设置了不同的上、右、下、左内边距值，分别为15px、20px、15px、20px。运行该代码，可以看到不同方向的内边距效果。
3. 使用padding缩写属性设置上、右、下、左内边距
除了分别设置上、右、下、左内边距外，我们还可以使用padding缩写属性同时设置四个方向的内边距值。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 15px 20px 15px 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
在上面的示例代码中，我们使用padding: 15px 20px 15px 20px;设置了上、右、下、左的内边距值，分别为15px、20px、15px、20px。运行该代码，可以看到四个方向的内边距效果。
4. 使用百分比设置内边距
除了使用像素值设置内边距外，我们还可以使用百分比值来设置内边距，以实现相对于父元素的内边距效果。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5% 10% 5% 10%;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
在上面的示例代码中，我们使用padding: 5% 10% 5% 10%;设置了上、右、下、左的内边距值为父元素宽度的5%和10%。运行该代码，可以看到相对于父元素宽度的内边距效果。
5. 使用em或rem单位设置内边距
除了使用像素值和百分比值设置内边距外，我们还可以使用em或rem单位来设置内边距，以实现相对于元素字体大小的内边距效果。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 0.5em 1em 0.5em 1em;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
在上面的示例代码中，我们使用padding: 0.5em 1em 0.5em 1em;设置了上、右、下、左的内边距值为元素字体大小的0.5em和1em。运行该代码，可以看到相对于元素字体大小的内边距效果。
6. 使用calc()函数计算内边距值
在CSS中，我们还可以使用calc()函数来计算内边距值，以实现更灵活的内边距设置。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: calc(1em + 10px) calc(2em - 5px) calc(1em + 10px) calc(2em - 5px);
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
在上面的示例代码中，我们使用calc()函数计算了上、右、下、左的内边距值，分别为1em + 10px、2em – 5px、1em + 10px、2em – 5px。运行该代码，可以看到通过计算得到的内边距效果。
7. 使用inherit继承父元素的内边距值
在CSS中，我们可以使用inherit关键字来继承父元素的内边距值，以实现内边距的继承效果。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Padding Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
padding: 10px;
}
th, td {
border: 1px solid black;
padding: inherit;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1 geek-docs.com</td>
<td>Row 1, Cell 2 geek-docs.com</td>
</tr>
<tr>
<td>Row 2, Cell 1 geek-docs.com</td>
<td>Row 2, Cell 2 geek-docs.com</td>
</tr>
</table>
</body>
</html>
Output:
在上面的示例代码中，我们为表格设置了padding: 10px;内边距，然后为表格中的th和td元素设置了padding: inherit;继承父元素的内边距值。运行该代码，可以看到内边距值被成功继承。