两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠，那么如何使元素上下margin不折叠呢？下面的方法或许对大家有所帮助 一、首先你要知道什么情况下会触发：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠 1.两个或多个 说明其数量必须是大于一个，又说明，折叠是元素与元素间相互的行为，不存在 A 和 B 折叠，B 没有和 A 折叠的现象。 2.毗邻 是指没有被非空内容、...
为什么margin-top不是作用于父元素:至于margin-top属性的基本用法再简单不过，那就是设置一个对象的上外边距，看下面的代码实例: 蚂蚁部落 * { margin:0px; padding:0px; } div { width:100px; height:100px; background-color:green; margin-top:50px; } 以上代码可以将div的上边距设置为50px，一切运行良好，没有任何问题，再来看下一段代码: 蚂蚁部落 #parent { width:200px; height:...
margin外边距合并详解: 外边距合并现象在网页布局中非常的常见，必须对此有明确的把我，以此做到未雨绸缪，否则可能影响工作效率，甚至严重阻碍项目的进度。在网络上已经有大量的相关文章，下面再通过实例结合对网络教材的总结，再来介绍一下外边距合并现象。 概念: 相邻的两个或者多个外边距在垂直方向上合并成一个外边距，这就是所谓的外边距合并。 水平方向不存在此现象。 外边距合并产生条件: 1.相邻的外边距之间没...
为什么padding和margin在span中不好用:可能标题的问题并不被所有人认同，有的可能觉得padding和margin是好用的，而有的却认为是不好用的。下面通过实例分别介绍一下两个属性在span中到底好不好用。一.padding属性: CSS教程span{ border:1px solid red;}.first{ padding:20px;}.second{ padding-left:20px; padding-right:20px;} 蚂蚁部落 蚂蚁部落 从以上代码可以看出第一个span设置的padding并没有完全正确的得...
代码： 效果图： 路人甲：OK?等高了？？ 路人丙：不是吧？ 路人乙：你这是在逗我？ xiaomogg： 效果有点惨，不过这的确是已经做了登高处理的 为什么“登高”，看起来却不等高 请留意代码处红框处 padding-bottom:99px; margin-bottom:-99px; 路人甲：这说明不了什么问题！！ 路人乙：快进入主题吧 路人丙：...................... xiaomogg： 其实“等高” 真的是不等高 1.如果把padding-bottom:99...
CSS中的body的默认margin 一般浏览器中都对body标签进行默认的margin设置为8px，当然，不同的浏览器会设置成不同的值，它是由浏览器的user-agent-stylesheet提供的，有些浏览器的user-agent-stylesheet可以由用户进行修改，而有的浏览器则不可以，所以开发人员不能依靠此来修改浏览器的默认设置。如果我们要修改body的默认值，只要覆盖其css样式即可: body { margin: 0px; padding: 0px; ...} 如果要使在不同的浏览器上设...
margin参数简单介绍: 此属性是用来设置元素的外边距的，再简单不过了，这里就不多介绍了，唯一可能造成困扰的就是它的参数，因为它最多可以有4个参数，当然也有缩写的形式，比如可以只带一个参数，下面就简单介绍一下。 参数列表如下: 一.带有一个参数的时候，将会作用于四边，例如margin:10px。 二.带有两个参数的时候，第一个用于上、下，第二个用于左、右，例如margin:10px auto。 三. 带有三个参数的时候，第一个用于...
转自：问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS样式，他们分别是间距和填充，一个作用于盒子外面，一个作用于盒子里面，默认的情况下，这些属性的值都会被计算在盒子的面积里面，在网页开发中的流体布局或者是响应式布局中，经常将Margin和Padding设置成百分数，那么到底这个百分数是多少，他是如何计算的呢？ Margin 假设我们有这样的一段HT...
前段时间我同事对于margin和padding应用百分比值似乎有些误解，觉得可能是个普遍问题，所以觉得有必要拿出来单独写一下。 margin和padding都可以使用百分比值的，但有一点可能和通常的想法不同，就是margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度，而是宽度 。 引用标准(2.1)原来的表达： The percentage is calculated with respect to the width of the generated boxs ...
问题来源 今天做项目的时候发现了一个问题，在使用text-indent属性对元素进行缩进是发现在360浏览器下发生了元素偏移，跟margin-left的效果一样，打开f12发现3607.1浏览采用的ie7.0的文档模式，果然在ie7里面测试是一样的结果 IE7下效果 其他浏览器下效果 之所以这样是因为ie6、7浏览器不支持display属性的inline-block值，你设置了也会忽视，而恰巧我的页面中的元素就使用了display:inline-block属...
为什么设置的margin-top属性不管用:建议:尽可能的手写代码，可以有效的提高学习效率和深度。有时候大家可能会遇到奇怪的现象，尽管没有任何的语法错误，但是设置的margin-top属性不会起作用，下面就就结合代码实例介绍一下产生此现象的原因和解决方法。原因一:外边距合并margin-top属性失效。代码实例如下: 蚂蚁部落.first{ width:100px; height:100px; background-color:red; margin-bottom:60px;}.second{ width:100p...
浏览器显示如下 dreamweavercs5代码编辑如下： "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 无标题文档 #t { margin-top:413px; background-color:#F00; padding:14px; } #f{ background-color:#0F0; margin:43px; } #u{ background-color: #30F; margin:43px; } 回复讨论(解决方案)...
子元素设置margin-top，父元素也受影响 * { margin: 0px; padding: 0px; } .father { width: 500px; height: 800px; background: #ccc; cursor: pointer; /*第一种padding-top: 1px;常用*/ /*第二种border: 1px solid red(transparent);可用*/ /*第三种父元素设置overflow: hidden;*/ } .son { width: 450px; height: 600px; margin-top: 200px; }
new document div { /*负边距margin使居中，首先定位到50% 然后再通过负边距拉回 元素高的一半 宽的一半*/position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;width:200px;height:200px;border:1px solid red;}
外边距(Margin)叠加 只有普通文档流中块级元素(块框)的垂直外边距才会发生外边距叠加。行内框、浮动框和绝对定位框之间的外边距不会叠加 两个相邻兄弟块框 父元素与子元素，并 父元素没有内边距或边框时 ,它们的顶和/或底外边距也会发生叠加。 当父元素没有内边距或边框时 当父元素有内边距或边框时 无论子元素是否有内边距或者边框都不会影响叠加 自己的垂直上下外边距叠加 叠加具有组合性，而...