使用 CSS 设置元素周围的边距空间

cssweb developmentfront end technology更新于 2025/1/14 12:28:17

CSS 边距属性用于设置所选元素边框周围的边距区域。边距属性是 margin-top、margin-right、margin-bottom 和 margin-left 的简写。

语法

CSS 边距属性的语法如下 −

Selector {
   margin: /*value*/
}

以下示例说明了 CSS 边距属性 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
body * {
   display: flex;
   float: left;
   margin: 10px 15px;
   border: thin solid;
   text-align: center;
   width: 40%;
   border-radius: 5%;
   box-shadow: 0 0 4px 1px grey;
}
p {
   font-family: "Sim Sun", monospace;
   background-color: lightcyan;
}
div {
   font-family: Impact, cursive;
   background-color: lightgreen;
}
</style>
</head>
<body>
<p>First demo text</p>
<div>A demo line goes like this..</div>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
   margin: 5% 30%;
   border: 12px double red;
   padding: 0.5rem;
   border-radius: 30px;
}
td:nth-child(even) {
   background-color: lightblue;
}
td:nth-child(odd) {
   background-color: lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>