html css 入门之margin与padding的区别

CSS中Margin与Padding详解
最新推荐文章于 2024-09-27 09:37:38 发布
最新推荐文章于 2024-09-27 09:37:38 发布
阅读量1.1k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35788269/article/details/80289716
本文详细解析了CSS中margin与padding的区别。margin用于设定元素间的距离，如两个DIV之间的间距；padding则用来设定元素内部内容与其边界之间的距离。通过具体实例介绍了如何设置上下左右四个方向的margin和padding。
                                     margin与padding的区别

 今天博主带领大家来学习一下css中margin与padding的区别！大家在使用DIV布局的时候肯定有一些疑问的把hhh偷笑

首先是margin：margin是指元素自身的边框，与另外一个元素的界面的距离，比如，两个DIV块之间的距离，这个时候就要使用margin来进行设置了！

设置上边距：margin-top：10px；

设置下边距：margin-bottom：10px；

设置左边距：margin-left：10px；

设置右边距：margin-right：10px；

显而易见，margin处理的是两个不同界域的区域块！

其次，针对于padding！从功能上来说，padding与margin是非常像的，但是他是设置内部元素到区域框之间的距离，间隔的！举个例子大家就很容易明白了！比如，我现在有一个width：500px；height：500px；的DIV的话，里边有张图片，，需要设置图片在DIV中的距离，可以使用padding来实现！

设置上边距：padding-top：10px；

设置下边距：padding-bottom：10px；

设置左边距：padding-left：10px；

设置右边距：padding-right：10px；

DIV中的元素可以是任何东西！比如DIV,文字，图片，SPAN等等！

好了，今天的分享就到这里哦！欢迎小伙伴们留言交流！

HTML中margin与padding的区别
悟已往之不谏，知来者之可追
05-21 1044
一张图片彻底搞清楚HTML中margin与padding的区别~！！@everybody
CSS中的margin与padding
hulin的博客
08-27 6293
CSS中的margin与padding
HTML中padding和margin的区别，代码加详解
03-08
HTML中padding和margin的区别，包括代码和详解，代码直接可用
margin padding border
qq_28923283的博客
06-02 298
我们以DIV为一个盒子为例，既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫“content(内容)”，而盒子的纸壁给他起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“pa
less和scss循环生成margin和padding
正一品程序员的博客
04-25 524
less和scss循环生成margin和padding。
HTML之margin和padding的区别
qq_44829555的博客
05-21 1万+
想要理解margin和padding的区别，首先应该明白在进行网页制作时都会遇到设定边距的情况，边距又分为外边距（margin）和内边距（padding） margin的用法 1、设置距离同级标签的间距； 2、设置距离父标签的间距； 关于边距距离的设定，规则如下： margin: 20px;/*四周相同*/ margin: 10px 20px;/*10px上下 20px左右 */ margin: ...
【HTML/CSS学习】margin和padding的区别
zx1041561837的博客
10-26 2807
margin用于创建元素之间的间距；padding用于控制元素内部内容与元素边界的距离
HTML中padding和margin的区别和用法
weixin_33716154的博客
01-03 747
　margin(外边距) 定义:margin是用来隔开元素与元素的间距，发生在元素本身的外部，margin用于布局分开元素使元素与元素互不相干。 提示:margin: top right bottom left;(margin:10px 20px 30px 40px) 它的给值方式为上，右，下，左。 建议何时应当使用margin：　　 需要在border外侧添加空白时。　 　空白处不需要背...
HTML中的padding和margin
最新发布
学无止境
09-27 3478
作用增加元素内部的空间，使内容不显得过于拥挤。可以用来突出元素的重要性或增加视觉层次感。语法（分别对应上、右、下、左的内边距值为 10 像素和 20 像素）。也可以使用缩写形式，如（四个方向内边距均为 10 像素）。示例假设一个<div>元素，设置了，那么这个元素内部的内容与边框之间就会有 20 像素的距离。二、Margin（外边距）Margin 是指元素边框与相邻元素之间的距离。它用于控制元素之间的间隔。作用分隔不同的元素，使页面布局更加清晰。可以用来调整元素在页面中的位置。语法。
html中padding和margin的区别
空白_回忆的博客
01-07 1769
css中padding和margin的区别margin 外边距border 边框padding 内边距也就是说 设置margin 那么他所占据的空白地方会是在边框外面设置padding 他所占据的空白地方是在边框里面
margin和padding的区别
Mango_yoo的博客
05-19 2116
在刚开始学习html的时候，我总分不清margin和padding他俩到底是指的哪一部分，现在通过一个例子总算弄清楚了他们两者的范围，简要跟大家说一下，不足之处多多批评指正哦！ 做过网页的应该都见过这张图片，它已经很直白的给我们展示了margin和padding分属的区域，以中间那条实线为分界点，往外是margin作用的区域，往内是padding作用的区域。接下来通过一个实例再来看一下： 这是...
HTML——margin和padding
qq_44687512的博客
07-16 2466
一、margin：外边距 1、margin-top：设置元素的上外边距 margin-top: 50px; 2、margin-bottom：设置元素的下外边距 margin-bottom: 50px; 3、margin-left：设置元素的左外边距 margin-left: 50px; 4、margin-right：设置元素的右外边距 margin-right: 50px; 5、margin属性可以有 1 到 4 个值 margin: 50px; 上下左右 margin: 10px 50px;
初学HTML 样式中的margin和padding
深海潜蛟的博客
07-15 1168
外边距样式属性margin margin-left：设置元素的左外边距 margin-right：设置元素的右外边距 margin-top：设置元素的上外边距 margin-bottom：设置元素的下外边距 margin：设置元素的四周外边距 共性： 注意： 2.margin：0px auto； 设置元素水平居中 3.*{margin：0px；}，取消HTML在浏览器中各标签设置的默认值，使块级和行级的外边距为零，能够贯穿整个屏幕； 4.块级元素的外边距会合并（垂直方向上，两个.
CSS中margin和padding的区别(1)
YaoXTao的专栏
04-23 1350
本文导读：padding margin都是边距的含义，关键问题得明白是什么相对什么的边距．padding是控件的内容相对控件的边缘的边距．margin是控件边缘相对父空间的边距．       在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。       下面讲解 padd
浅析 Margin 和 Padding 的区别
2302_79327676的博客
02-03 2658
属性用于设置，即控制。属性用于设置内边距，即。margin 是用来隔开元素与元素的间距；padding 是用来隔开元素与内容的间隔。
HTML边距设置之padding和margin
热门推荐
jimsonhappy的专栏
09-25 5万+
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。       下面讲解 padding和margin常用的用法 一、padding 1、语法结构 （1）padding-left:10px; 左内边距 （2）padding-right:10px; 右内边距 （3）pad
HTML中详述外边距样式属性（margin）与内边距样式属性（padding）
zzu957的博客
07-15 2万+
外边距样式属性（margin） 外边距样式属性（margin）：设置边框外的距离。 属性：margin-top样式属性，margin-bottom样式属性，margin-left样式属性和margin-right样式属性。 代码示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值