css中margin和padding的区别_html/css_WEB-ITnose
程序员文章站
2022-04-14 16:25:34
...
写在前面
这几天一直在整理面试中遇到的问题,其中一个就是margin与padding的区别。当时说的虽然说出要点了,但是心里还是有点疑惑,所以就又查了查。结合之前整理的内容,深入的研究了下。
[HTML/CSS]盒子模型,块级元素和行内元素
[HTML/CSS]margin属性用法
区别
①margin:是外间距,padding:是内边距。例如现在有两个2mX2m的房子、房子与房子是有距离的。现在你坐在其中一个房子的中间,这时,你与你所在房子的墙之间就有了个距离。我们可以理解为CSS的padding。而你所在房子与另一个房子之间的距离就是margin.
②打个比方,在桌子上放了一个盒子,盒子里放了一个东西!把这个盒子看成是你的那个元素或者说是DIV,那么这个盒子离里面的东西的距离就是padding,而这个盒子里桌子边缘的距离,就是margin!
③
www.soojs.com
padding-top:是www.soojs.com距div的高度 margin-left:是div距body的宽度。 总结
考察的css中margin和padding的区别,通过对比,就比较容易分清了。
推荐阅读
-
详解HTML5中div和section以及article的区别
-
html/css中相对定位relative和绝对定位absolute的用法
-
深入浅析HTML5中的article和section的区别
-
Vue中的作用域CSS和CSS模块的区别
-
Vue中对比scoped css和css module的区别
-
CSS3中:nth-child和:nth-of-type的区别深入理解
-
详解HTML5中div和section以及article的区别
-
CSS3中background-clip和background-origin的区别示例介绍
-
Class与ID区别 margin和padding区别 CSS学习笔记
-
网页布局设计css中单位px和em,rem的区别