当前位置： 首页 > article >正文

CSS|10 内填充padding外边距margin

article 2024/12/22 4:55:35

内填充padding

内填充，知道是盒子里的内容到边框的这一段距离。

padding有4个方向：
- padding-top 上内填充
- padding-right 右内填充
- padding-bottom 下内填充
- padding-left 左内填充

使用padding的方法有两种：
使用小属性
比如：

  • padding-top: 20px;
  • padding-right: 30px;
  • padding-bottom: 40px;
  • padding-left: 50px;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding小属性</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            /*使用小数型来描述内填充*/
            padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 40px;
            padding-left: 50px;
            border: 1px solid #f00;
        }
    </style>
</head>
<body>
    <div class="box">文本文本文本文本文本文本文本文本文本文本文本文本</div>
</body>
</html>

在这里插入图片描述

简写属性：这个属性是有方向，可以同时表示四个方向，顺时针方向，上右下左
比如：
padding:20px; 表示上左下右这四个方向的内填充都是20像素
padding:10px 20px;表示上下为10像素，左右为20像素
padding:10px 20px 30px;表示上为10 左右为20 下为30
padding:10px 20px 30px 40px; 表示上为10 右为20 下为30 左40

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用padding简写属性</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid #f00;
            /*padding简写属性*/
            /*表示上左下右这四个方向的内填充都是20像素*/
            /*padding:20px; */
            /*表示上下为10像素，左右为20像素*/
            /*padding:10px 20px; */
            /*表示上为10 左右为20 下为30*/
            /*padding:10px 20px 30px; */
            /*表示上为10 右为20 下为30*/
            padding:10px 20px 30px 40px; 
        }
    </style>
</head>
<body>
    <div class="box">文本文本文本文本文本文本文本文本文本文本文本文本</div>
</body>
</html>

显示效果和刚刚一样。

外边距margin

margin表示外边距，是指盒子与盒子之间的距离。

使用margin的方法有两种：
使用小属性
margin-top: 20px; 上外边距
margin-right: 30px; 右外边距
margin-bottom: 40px; 下外边距
margin-left: 50px; 左外边距

简写属性：这个属性是有方向，可以同时表示四个方向，顺时针方向，上右下左
比如：
margin:20px; 表示上左下右这四个方向的内填充都是20像素
margin:10px 20px; 表示上下为10像素，左右为20像素
margin:10px 20px 30px; 表示上为10 左右为20 下为30
margin:10px 20px 30px 40px; 表示上为10 右为20 下为30 左40

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin</title>
    <style type="text/css">
        .div1{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /*下外边距*/
            /*margin-bottom: 20px;*/
            margin: 0px 0px 30px 0px;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: #0f0;
            /*margin-top: 40px;*/
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

在这里插入图片描述
上右下左，下margin 30px

margin的注意事项

margin有塌陷现象

什么是margin的塌陷现象？
1.在标准的文档流中，竖直方向的margin值不会叠加，它会取较大的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竖直方向的margin值不会叠加 它会取较大的值</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
        }

        .div1{
            background-color: #f00;
            /*下外边距*/
            margin-bottom: 20px;
        }
        .div2{
            background-color: #0f0;
            margin-top: 40px; 
            /*margin取最大值*/
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

中间的margin不是60，而是选取较大的40px
在这里插入图片描述

2.横着方向是没有margin的塌陷现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横着方向是没有margin的塌陷现象</title>
    <style type="text/css">
        .s1{
            background-color: #f00;
            margin-right: 20px;
        }
        .s2{
            background-color: #0f0;
            margin-left: 40px;
        }
    </style>
</head>
<body>
    <span class="s1">文本一</span>
    <span class="s2">文本二</span>
</body>
</html>

左右方向的margin是可以叠加的，这里文本一和文本二之间的距离为60px
在这里插入图片描述

3.浮动元素它是没有margin的塌陷现象的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动元素它是没有margin的塌陷现象的</title>
    <style type="text/css">
        .box{
            width: 100px;
            border: 5px solid #000;
        }
        .box div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: #f00;
            float: left;
            margin-bottom: 20px;
        }
        .div2{
            background-color: #00f;
            float: left;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
</html>

两个都是浮动元素，所以竖直方向都有margin，直接的间距为60px
在这里插入图片描述

margin居中

margin的值可以是auto，当左外边距和右外边距的值都是auto的时候，这个盒子就会水平居中。

注意：
1.使用margin来实现水平居中时，一定要有固定的宽度（给这个盒子设置一个宽度），只有块元素可以实现水平居中，行内元素是不能实现居中的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin居中</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: #f00;
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            margin-bottom: 100px;
        }
        p{
            height: 50px;
            background-color: skyblue;
        }
        span{
            background-color: #0f0;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>文本文本</p>
    <span>看看我在哪</span>
</body>
</html>

在这里插入图片描述

2.只有标准文档流中的盒子才可以使用margin来实现水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>只有标准文档流中的盒子才可以使用margin来实现水平居中</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: #f00;
            margin: 100px auto;
            float: left;
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

3.margin属性是用来实现盒子的水平居中，而不是文本的水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin只能实现盒子居中text-align只能实现文本的对齐</title>
    <style type="text/css">
        .content{
            width: 600px;
            height: 300px;
            border: 1px solid #f00;
            /*实现文本居中*/
            text-align: center;
            /*实现元素居中*/
            margin:20px auto;
        }
    </style>

</head>
<body>
    <div class="content">margin只能实现盒子居中text-align只能实现文本的对齐</div>
</body>
</html>

在这里插入图片描述

4.text-align这个属性，是用于实现文本的对齐方式，如果其值为center，就表示文本水平居中，但是它不能实现盒子的水平居中

善于使用父元素的padding而不是使用子元素的margin

方法1：给其父元素设置一个边框线，margin会消失。
这种方法不常用，因为边框一般主要是用于来调试代码的，很少会给一个盒子设置边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin需求</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: #0f0;
            /*给父元素设置一个边框线，margin会消失*/
            border: 1px solid #f00;
        }
        .content{
            width: 100px;
            height: 100px;
            background-color: #f00;
            margin-top: 100px;
        }

    </style>


</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

在这里插入图片描述

方法2：不要使用子元素的margin而是要使用其父元素的padding
说明：margin这个属性，它本意是用于来描述兄弟与兄弟元素之间的关系，不是用于描述父子元素之间的关系的。
如果是父子元素的关系，就最好使用给其父元素设置padding属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin需求</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: #0f0;
            /*给父元素设置一个边框线，margin会消失*/
            /*border: 1px solid #f00;*/
            /*使用padding*/
            padding-top: 100px;
        }
        .content{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /*margin-top: 100px;*/
        }

    </style>


</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

padding相较于父元素
在这里插入图片描述


http://www.kler.cn/a/446035.html

相关文章：

  • 练习题 最小栈
  • 未来趋势系列 篇五：自主可控科技题材解析和股票梳理
  • 信号处理相关的东东（学习解惑）
  • springboot443旅游管理系统(论文+源码)_kaic
  • Mac iOS、Android、Flutter、React Native开发环境配置
  • 告别机器人味：如何让ChatGPT写出有灵魂的内容
  • UDP系统控制器_音量控制、电脑关机、文件打开、PPT演示、任务栏自动隐藏
  • 深入解析 OpenSSH 的核心原理
  • 鸿蒙学习笔记：用户登录界面
  • 震撼！最强开源模型通义千问2.5 72B竟在4GB老显卡上成功运行！
  • 基于 Vue 3 实现无限滚动翻页组件
  • linux java 查看异常堆栈
  • 文件包含include
  • Docker 设置代理的三种方法（2024年12月19日亲自测试）
  • go-zero(十五)缓存实践：分页列表
  • web自动化测试知识总结
  • PostgreSQL 实现相似性搜索
  • qt对话框小结
  • 青少年编程与数学 02-004 Go语言Web编程 05课题、路由管理
  • 弹性裸金属服务器（神龙）：助力企业腾飞的云计算“黑科技”
  • 电商商品详情API接口（item get）数据分析上货
  • QT从入门到精通(二) ——信号与槽机制
  • IntoTheBlock 联创：Web3 基础设施正在被过度建设，我们正在盲目行事
  • 【Mongo工具】Mongo迁移工具之Mongo-shake
  • windows C#-使用构造函数
  • ArkUI性能优化（0）—DevEco Profiler调优工具