谈谈CSS的边距合并之我的理解

  今天通过和一些师弟的交流,发现他们对外边距合并不是很理解。

  其实浅析CSS的外边距合并的话,是很容易明白是怎么一回事儿的。但是如果想要深入了解margin这个神奇的属性,那可得费一番功夫了。

  我是一个菜鸟,在这里当然不会解释得太复杂,在这里我只是想谈谈我对外边距合并的理解。

  其实要理解清楚什么是外边距合并,最简单的方法就是自己动手试试。我认为,理解外边距合并的关键就在于理解这句话:“只要接触,就合并”。

  什么叫“只要接触,就合并”呢?其实理解起来就是:当两个元素的外边距相接触,它们就融合了。什么时候就能接触呢?就是当两个元素都没有边框属性和内边距属性。

  还是听不懂?那就不是我所力所能及的范畴了。因为你没有理解什么是盒模型了。

  其实CSS的外边距合并就是这么一点点东西。我拿出来讲是因为,看了好多人的代码,都喜欢把margin和padding混在一起。不管用的是 padding还是margin,只要最终显示效果和自己想象的一致,他们觉得就达到目的了。有时候用margin,遇到了边距合并却不知道怎么回事,或者说不知道怎么解决,然后就想出各种法子“制造”自己想要的效果(例如加多一个空元素撑开留白)。但是其实我想说,这样使用margin和 padding,根本就不是W3C制定padding和margin时候的本意。

  好吧,小小地吐槽了一下,也不想说多什么东西,因为别人写的比我更深入更细致。这里给几篇文章的地址,有助于大家加深对margin和padding使用的理解。

时间: 2024-12-20 19:17:54

谈谈CSS的边距合并之我的理解的相关文章

CSS外边距合并(叠加)

几种CSS外边距合并的情况 一个元素的下边距和一个元素的上边距重合 一个元素包含着另一个元素 前提:中间没有内边距和边框分隔开 空元素的上边距和下边距 前提:是个空元素,没有内容,没有内边距,没有边框 为什么会合并? 总的来说,从两个垂直外边距合并时,将形成一个外边距,外边距的值等于外边距较大者. 适用对象:只有普通文档流的,行内.浮动.绝对定位不会产生合并. 它也有它的意思所在 其实这不是一个bug,它可以让段落的边距和边框高度一致.

css的内边距和外边距的auto怎么使用

问题描述 css的内边距和外边距的auto怎么使用 如下代码为什么内边距没变啊?内边距都为0了? td.test1 {padding: 20px auto} 这个表格单元的每个边. 解决方案 http://www.w3school.com.cn/css/css_margin.asp

谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣

谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 所有题目汇总在我的 G

谈谈我对面向对象以及类与对象的理解

对于刚接触JAVA或者其他面向对象编程语言的朋友们来说,可能一开始都很难理解面向对象的概念以及类和对象的关系.笔者曾经带过一个短期培训班教授java入门基础,在最后结束课程的时候,还有很多同学不太理解面向对象的思维以及类与对象的意义.这几天有空,就想着整理整理自己的思路,谈谈自己对面向对象以及类与对象的理解. 面向对象 首先,一言不和先百度,得到如下定义: 一切事物皆对象,通过面向对象的方式,将现实世界的事物抽象成对象,现实世界中的关系抽象成类.继承,帮助人们实现对现实世界的抽象与数字建模. 我

利用css负边距实现tab切换效果

负边距的使用非常简单  代码如下 复制代码 <style type="text/css"> .one { height:100px; width:300px; border:2px solid red; margin-bottom:-10px; } .two { height:100px; width:300px; border:2px solid blue; } </style> <p class="one"></p>

谈谈CSS加入网页的五种方法

在XHTML网页中如何加入CSS呢?这篇教程告诉大家引入CSS的几种方式. 在XHTML网页中如何加入CSS呢?这篇教程告诉大家引入CSS的几种方式. XHTML文件是通过CSS样式进行显示的控制的,也就是结合XHTML与CSS来表现页面内容.那么到底有哪些方式在XHTML文件中引入CSS样式呢? 一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: <td sty

网页制作 谈谈CSS样式表的命名规范

css|规范|网页|样式表 最近和一程序员合作项目.弄的我头都大了~埋怨我的CSS命名看不懂~得按照他的来.结果我打开他的页面,看了看,从头第一个开始就是contentCommon,下面全部是content****. 我说明了我的理由,过了半会,似乎是接受了,却突然来一句:"不要用H标签嘛!还有不要用UL来定义导航等".对于很多合作过的程序员,大多都是这样,命名规范大多是自成一派.对于制作标准更是视而不见.抱着只照顾IE正常浏览的态度叫嚣着"让FIREFOX和SAFARI见鬼

谈谈CSS Sprites技术及其优化

CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊. 在大家还在拨号上网的"远古时期",由于网速的限制,页面开发者都喜欢把网页里面的图片字节数控制的非常小,往往在一个图片文件夹里散落着n多的小碎图.随着网络技术的发展,网速的提升,大家越来越重视页面的加载速度,页面效率问题,过去的那些小图便成为了前端开发者的眼中钉,因为每加载一张图片都会产生一次浏