margin padding图文详解

最新推荐文章于 2024-07-09 15:07:03 发布
最新推荐文章于 2024-07-09 15:07:03 发布
阅读量1.5k 收藏 5
点赞数 1
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Long_gone/article/details/107103375
版权
本文详细介绍了CSS中的外边距margin和内边距padding，包括它们的单边属性、简写属性以及在盒模型中的应用。通过理解margin和padding，可以更好地控制元素的布局和间距。同时，文章还提到了外边距塌陷问题和box-sizing属性的使用，帮助读者深入理解CSS盒模型。
摘要由CSDN通过智能技术生成

一、外边距——margin

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。单边外边距属性

上外边距：margin-top
右外边距：margin-right
下外边距：margin-bottom
左外边距：margin-left
在这里插入图片描述
外边距塌陷（改变）
overflow:hidden;

二、内边距——padding

元素的内边距在边框和内容区之间。
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
单边内边距属性

上外边距：padding-top
右外边距：padding-right
下外边距：padding-bottom
左外边距：padding-left

在这里插入图片描述
box-sizing: border-box;

三、margin和padding的简写属性

(四个值)
margin: top ri

最低0.47元/天 解锁文章
Long_gone
关注
专栏目录
padding和margin的异同点
牛栏山矿泉水
07-18 1005
一、padding 1、语法结构 （1）padding-left:10px; 左内边距 （2）padding-right:10px; 右内边距 （3）padding-top:10px; 上内边距 （4）padding-bottom:10px; 下内边距 （5）padding：10px; ...
margin和padding属性详解
Zzze0101的博客
05-21 3372
margin 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 margin样式属性用于在一个声明中设置所有外边距的宽度，或者设置各边上外边距的宽度。该属性有多个值： 值 描述 auto 浏览器计算外边距。 length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。注：允许使用负值，不过要谨慎使用。 % 规定基于父元素的宽度的百...
Padding 和 Margin 的区别详解
最新发布
My_wife_QBL的博客
07-09 2652
padding属性用于设置元素内容与其边框之间的间距。换句话说，padding是元素内部的空间，它位于元素内容和边框之间。padding可以应用于元素的四个边（上、右、下、左），也可以分别设置每个边的值。margin属性用于设置元素与其相邻元素之间的间距。换句话说，margin是元素外部的空间，它位于元素边框与其他元素之间。margin同样可以应用于元素的四个边，也可以分别设置每个边的值。
CSS中 padding 、margin两个重要属性的详细介绍及举例说明
09-09 1542
本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代
外边距（margin）和内边距（padding）
Tsinbo1314的博客
06-06 9200
请注意，外边距和内边距会相互叠加。如果两个相邻元素都具有外边距，它们的外边距将合并为一个外边距。在CSS中，外边距（margin）和内边距（padding）是用来控制元素周围空白区域的属性。这些属性可以接受不同的值，例如像素（px）、百分比（%）、em等。
margin和padding的用法
热门推荐
qq_44885374的博客
04-24 3万+
如果我们想要定位块或者文字等的位置 ，除了可以用相对定位和绝对定位还可以用margin 和paddinng； <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ...
margin和padding
qq_56101688的博客
07-30 381
margin是外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。padding让内容（文字）与（包裹）元素之间有一段“呼吸距离”。（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。（3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白。（1）需要在border内侧添加空白时（往往是文字与边框距离的设置），（2）空白处不需要有背景（色）时，
CSS中height和width在IE和其他浏览器中的区别图文详解
09-25
如果传入参数`true`，`outerWidth()`还会加上左右外边距，即`margin-left` + `border-left` + `padding-left` + 内容宽度 + `padding-right` + `border-right` + `margin-right`。`height`属性的辅助方法类似，有`...
微信小程序自定义组件开发图文详解
兄弟连之一个前端小白的成长
05-03 2356
要实现的效果如下图 红色框部分就是我们的自定义组件 第一步：与pages同级新建一个components文件夹，用于存放所有的自定义组件 方便统一管理 第二步：在这个components上鼠标右键 选择新建compontent选项 然后输入一个自定义的名称后确定 例如我们新建一个group组件 那我们就只需要办理入group 即可 然后我们就可以看到新建了4个文件 group.js group.json group.wxml group.wxss 接下来我们就可以进行写入代码
ssm框架整合，图文详解！！！
weixin_45058888的博客
09-29 498
ssm框架整合 所需依赖pom.xml 在本文最下面 创建spring_mvc.xml文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springf
详解Vue demo实现商品列表的展示
12-29
Vue实现商品列表的展示是一个比较... padding: 3px; list-style: none; margin-right: 15px; border: 1px solid #eee; } #box img{ width: 200px; height: 150px; } </style> html： <
padding和margin
qq_36425800的博客
05-06 256
padding和margin使用的一个坑：在父布局使用padding时，是不计算子组件（如CardView）的阴影部分的，会将子布局的阴影遮住使其无法完全显示，此时在子布局上使用margin可以修复这个bug。 ...
margin和padding介绍及使用场景
qq_41770595的博客
02-23 1万+
Margin和Padding介绍及使用场景 在html文档中，margin和padding属性是盒子模型的组成部分，正确理解这两个属性也是学习用css布局的关键。 盒子模型: 任意一个块级元素均由content（内容），padding（内边距），background（包括背景颜色和图片），border（边框），margin（外边距）五个部分组成。 期中margin属性定义了元素边框外部的空白区域，...
标准盒子模型（margin、padding）属性的讲解
weixin_64315174的博客
03-06 600
标准盒子模型（margin、padding）属性的讲解
CSS样式属性margin,padding详解
bravery__的博客
07-15 3876
盒模型基本属性有两个：padding和margin。 以边框border为界，边框里面是内边距，边框外面是外边距。 一.外边距margin： 外边距是指边框以外与其他同级元素之间的距离，外边距可以控制同级元素之间的距离( 用于设置同级标签的间距)。 1.margin的复合式写法： margin：10px；（表示元素上下左右外边距都是10px） margin：10px 10px；（表示元素上下外边距是10px，左右外边距是10px） margin：10px 10px 10px；（表示元素上外边距是10px，
CSSmargin属性与padding属性的详细描述
LinDadaxia的博客
07-15 563
margin属性概述 margin用于一个声明中设置所有同级标签外边距的宽度 可以通过margin设定上下左右边距（四种写法） 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 如果只提供一个，将用于全部的四边。 如果提供两个，第一个用于上、下，第二个用于左、右。 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。 也可以通过margin-top，margin-bottom，margin-left，margin-right单独设定上下左右的边距大小 注意：margin： aut
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值