盒子模型--外边距

最新推荐文章于 2024-07-25 14:15:14 发布

不好意思，此人不存在

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量115

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_44278908/article/details/113835713

版权

盒子模型–外边距

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;
            border: 10px red solid;
            /* 
                外边距（margin）
                    -外边距不会影响盒子可见框的大小
                    -但是外边距会影响盒子的位置
                    -一红四个方向的外边距：
                    margin-top
                          -上外边距，设置一个正值，元素会向下移动
                    margin-right
                          -默认情况下设置margin-right不会产生任何效果
                    margin-bottom
                          -下外边距，设置一个正值，其下边的元素会向下移动
                    margin-left
                          -左外边距，设置一个正值，元素会向右移动
                    -元素在页面中是按照自左向右的顺序排列的
                         所以默认情况下如果我们设置的左和上外边距则会移动
                         而设置下和右外边距会移动其他元素
                    -margin的简写属性
                         margin 可以同时设置四个方向的外边距，用法和padding一样
                    
                    -margin会影响到盒子的实际占用空间
             */
             /* margin-top: 100px;
             margin-left: 100px;
             margin-bottom: 100px; */
             margin-bottom: 100px;

        }
        .box2{
            width: 220px;
            height: 220px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

内边距介绍

不好意思，此人不存在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
盒子模型--外边距

盒子模型–外边距<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{
复制链接

扫一扫