内边距padding

  • 设置元素所有内边距的宽度，或者单独设置各边上内边距的宽度
  • 单独设置各边的内边距：padding-top、padding-left、patting-bottom、patting-right
  • 如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性
例：
<!doctype html>
<html lang="en" xmlns:src>
<head>
    <meta charset="utf-8">
    <title>家宝</title>
    <style type="text/css">
        td{
            text-align: center;
            padding: 10px 20px 30px;
        }
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
     <table border="" align="center" width="50%">
         <tr>
             <th>班级</th>
             <th>姓名</th>
             <th>年龄</th>
             <th>性别</th>
         </tr>
         <tr>
             <td>101</td>
             <td>张三</td>
             <td>18</td>
             <td>男</td>
         </tr>
         <tr>
             <td>101</td>
             <td>李四</td>
             <td>18</td>
             <td>男</td>
         </tr>
         <tr>
             <td>101</td>
             <td>王五</td>
             <td>18</td>
             <td>女</td>
         </tr>
     </table>
</body>
</html>

外边距margin

  • 设置元素所有外边距的宽度，或者单独设置各边上外边距的宽度

  • 单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right

  • 如果在表的内容中控制文本到边框的外边距，使用td和th元素的填充属性

例：
<!doctype html>
<html lang="en" xmlns:src>
<head>
    <meta charset="utf-8">
    <title>家宝</title>
    <style type="text/css">
       p{
           background-color: red;
       }
       #p1{
           margin: 10px 20px;
       }
    </style>
</head>
<body>
     <p>这是一段文本</p>
     <p id="p1">这是一段文本</p>
</body>
</html>