CSS|内外边距

最新推荐文章于 2024-07-26 19:29:32 发布

原创最新推荐文章于 2024-07-26 19:29:32 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html #内外边距

CSS 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了CSS中设置元素内外边距的方法，包括margin和padding的使用，以及如何通过margin实现元素的水平居中。示例代码中展示了如何使用margin: 0 auto实现div的水平居中。此外，内容还提及了边框、背景颜色和径向渐变等CSS属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS|内外边距

设置外边距和内边距：

外边距：

margin-top 上
margin-right 右
margin-bottom 下
margin-left 左

内边距：

padding-top 上
padding-right 右
padding-bottom 下
padding-left 左

也可以使用margin或者padding，它们可以有2，3或4个参数：

margin:上边距，右边距，下边距，左边距（顺时针）
margin：上边距，左右边距，下边距
margin：上下边距，左右边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内外边距</title>
  <style>
    div{
      width: 300px;
      border: solid blue 5px;
      background-image: radial-gradient(ellipse,yellow,green);
      /*
      margin和padding都可以是2，3，4个参数
      margin:上边距，右边距，下边距，左边距（顺时针）
      margin：上边距，左右边距，下边距
      margin：上下边距，左右边距
      */
      margin: 0 auto 0 auto;
    }
  </style>
</head>
<body>

<div>
  这个盒子的内容用来讲解该盒子的属性：
  <br>
  盒子宽度为300px
  <br>
  边框为5px，蓝色，实线
  <br>
  背景颜色为黄绿径向渐变
  <br>
  外边距为0 auto 0 auto
</div>

</body>
</html>