零基础CSS入门教程(16)——外边距

最新推荐文章于 2024-05-18 06:08:21 发布

程序员大宁

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量249

点赞数

分类专栏： CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_61808806/article/details/128250313

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本章目录

1.任务目标

要理解外边距，先来说一下外边。
物体的外边，指的就是外围的边界，对网页元素来说，外边就是元素最外面的边界。
那么外边距，就是一个物体的外边，与另一个物体的外边的距离。
CSS之中，通过margin来设定元素的外边距，本篇就来说明下用法。

2.无外边距

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
</head>

<body>
  <div class="btn01">
    <input type="button" value="按钮1">
  </div>
  <div class="btn02">
    <input type="button" value="按钮2">
  </div>
</body>

</html>

效果如下
在这里插入图片描述
我们可以看到这两个按钮很丑，想让他们分开一点

3.有外边距

可以通过margin-left/margin-right/margin-top/margin-bottom分别设定元素的左、右、上、下边距。
我们第二按钮向下外边距10个像素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .btn02{
           margin-top: 10px;
       }
    </style>
</head>

<body>
  <div class="btn01">
    <input type="button" value="按钮1">
  </div>
  <div class="btn02">
    <input type="button" value="按钮2">
  </div>
</body>

</html>

效果如下
在这里插入图片描述

4.小结

我们本小结学习了外边距，我们要学会使用外边距并熟练掌握。

程序员大宁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零基础CSS入门教程(16)——外边距

可以通过margin-left/margin-right/margin-top/margin-bottom分别设定元素的左、右、上、下边距。物体的外边，指的就是外围的边界，对网页元素来说，外边就是元素最外面的边界。CSS之中，通过margin来设定元素的外边距，本篇就来说明下用法。那么外边距，就是一个物体的外边，与另一个物体的外边的距离。我们本小结学习了外边距，我们要学会使用外边距并熟练掌握。我们可以看到这两个按钮很丑，想让他们分开一点。我们第二按钮向下外边距10个像素。要理解外边距，先来说一下外边。
复制链接

扫一扫