CSS|内外边距

最新推荐文章于 2024-05-26 08:31:11 发布

Alan_Lowe

最新推荐文章于 2024-05-26 08:31:11 发布

阅读量894

点赞数 1

分类专栏： # CSS 文章标签： css3 css html 内外边距

本文链接：https://blog.csdn.net/qq_45985728/article/details/119273169

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

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>

使用auto可以实现div居中：

在这里插入图片描述

人生没有白走的路，每一步都算数！

Alan_Lowe

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS|内外边距

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：上下边距，左右边距
复制链接

扫一扫