CSS|10 内填充padding外边距margin

ops/2024/12/18 6:25:43/

内填充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">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">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">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">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">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">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">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">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">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">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">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.ppmy.cn/ops/142826.html

相关文章

【go每日一题】 channel实现mutex锁

【go每日一题】 channel实现mutex锁

代码实现 package testimport ("fmt""strconv""testing""time" )type mutexCh struct { //应该大写&#xff0c;给外部所有包用ch chan int // 私有变量&#xff0c;否则外部操作 }func NewMutexCh() *mutexCh {return &mutexCh{…
阅读更多...
idea无法识别文件，如何把floder文件恢复成model

idea无法识别文件，如何把floder文件恢复成model

前景&#xff1a; 昨天&#xff0c;我在之前的A1214模块包下新增了一个demo类&#xff0c;然后又新建了一个A1216模块&#xff0c;写了算法题&#xff0c;后面打算用git提交&#xff0c;发现之前的A1214模块下的demo类和新建的模块源文件都已经被追踪了&#xff0c;都是绿色的&…
阅读更多...
用豆包MarsCode IDE，从0到1画出精美数据大屏！

用豆包MarsCode IDE，从0到1画出精美数据大屏！

豆包MarsCode IDE 是一个云端 AI IDE 平台&#xff0c;通过内置的 AI 编程助手&#xff0c;开箱即用的开发环境&#xff0c;可以帮助开发者更专注于各类项目的开发。 作为一名前端开发工程师&#xff0c;今天想尝试利用豆包MarsCode IDE&#xff0c;选择 Vue Echarts 创建一个…
阅读更多...
在项目中import 语句通常遵循的顺序规范

在项目中import 语句通常遵循的顺序规范

一般推荐的顺序是&#xff1a; React 相关的核心包第三方库/依赖组件导入工具/常量/类型导入样式文件导入 比如&#xff1a; // 1. React 相关 import { useEffect, useState } from react; import { useLocation } from react-router-dom;// 2. 第三方库 import { Dialog }…
阅读更多...
【网络安全】WIFI WPA/WPA2协议：深入解析与实践

【网络安全】WIFI WPA/WPA2协议：深入解析与实践

WIFI WPA/WPA2协议&#xff1a;深入解析与实践 1. WPA/WPA2 协议 1.1 监听 Wi-Fi 流量 解析 WPA/WPA2 的第一步是监听 Wi-Fi 流量&#xff0c;捕获设备与接入点之间的 4 次握手数据。然而&#xff0c;设备通常不会频繁连接或重新连接&#xff0c;为了加速过程&#xff0c;攻…
阅读更多...
中英文网店系统运营风险 跨境电商平台法律与税务处理

中英文网店系统运营风险 跨境电商平台法律与税务处理

欢迎来到今天的电商运营小课堂&#xff01;今天我们探讨跨境电商平台的运营风险&#xff0c;尤其是中英文网店系统的使用&#xff0c;以及如何应对不同地区的法律与税务挑战。首先&#xff0c;我们来看看中英文网店系统的运营风险。很多跨境电商平台需要支持多语言切换&#xf…
阅读更多...
Android Studio、JDK、AGP、Gradle、kotlin-gradle-plugin 兼容性问题

Android Studio、JDK、AGP、Gradle、kotlin-gradle-plugin 兼容性问题

文章目录 问题&#xff1a;解决办法&#xff1a;gradle与 java的版本兼容AGP与Gradle的版本兼容kotlin 与 jvm 的版本兼容KGP、Gradle、AGP兼容关系kotlin 与 java 的编译版本配置 问题&#xff1a; 你从githb上clone了一个项目&#xff0c;本地跑的时候&#xff0c;各种报错。…
阅读更多...
Day9 神经网络的偏导数基础

Day9 神经网络的偏导数基础

多变量函数与神经网络 在神经网络中&#xff0c;我们经常遇到多变量函数。这些函数通常描述了网络的输入、权重、偏置与输出之间的关系。例如&#xff0c;一个简单的神经元输出可以表示为&#xff1a; z f ( w 1 x 1 w 2 x 2 … w n x n b ) z f(w_1x_1 w_2x_2 \ldots…
阅读更多...
最新文章

Copyright @ 2022~2023