Margin与宽高度的关系 在讲此之前，必须知道什么是containing-box以及一些宽高度的一些关系，关于containing-box的概念以及与宽高度的关系可看我的前一篇文章CSS:关于元素高度与宽度的讨论 系列文章(三)。 1.元素containing-box宽高度等于内容宽度(原理1) HTML CSS .wrap { float: left; border: 2px solid #000; } .item1 { width: 100px; height: 100px; background: #fdf; margin-le...
简单来说，padding就是内边距，margin就是外边距如下图: margin和padding的区别用图表示为：
在进行页面布局时，经常会用到float，但使用了float后，在IE下margin会出现加倍的问题，我一直是用hack的方法，但最近做个页面时，发现用hack 了，样子和在FF下，还是不一样，于是就网上查找了下，加个display:inline;就可以解决了，这样IE和FF下就都一样了。 举例： CSS,如果这里不使用display:inline: 在IE下会出现加倍问题 .div_float{float:left;width:180px;height:100px;margin:10px;display:inline;border:1px...
为什么设置的margin-top不不起作用:建议:尽可能的手写代码，可以有效的提高学习效率和深度。大家知道可以通过margin-top属性设置对象的上外边距，但是有时候设置了此属性之后，并没有起任何作用。多种原因造成的，其中一个就有由外边距合并造成的，下面再介绍一种。先看一段代码实例: 蚂蚁部落div { width: 400px; height: 400px; border: 1px solid red;}span { border: 1px solid green; margin-top: 50px; m...
为什么margin的auto属性失效了:建议:尽可能的手写代码，可以有效的提高学习效率和深度。通常情况下，可以使用margin:0px auto将对象设置为水平居中对齐。这是因为auto属性值能够使浏览器自动为对象判断外边距大小，但是在下面的情况下却失效了。代码如下: 蚂蚁部落.parent{ width:300px; height:200px; border:1px solid red;}.children{ width:200px; height:100px; background-color:green; position:absolu...
子元素的margin-top作用于外层父元素解决方法:有时候在设置子元素的margin-top属性的时候，本来是要作用于父元素，但是表现的结果却是父元素具有了margin-top效果，下面就通过代码实例介绍一下如何解决此问题。代码实例如下: 蚂蚁部落#box{ width:200px; height:200px; background:red; overflow:hidden;}#main{ width:50px; height:50px; background:blue; margin-top:50px;} 上面代码实...
margin外边距负值的作用:在很多CSS代码中，都可以看到margin外边距有使用负值的情况，下面就介绍一下他的作用。代码实例如下: 蚂蚁部落*{ margin:0px; padding:0px;}#box{ width:300px; height:300px; background-color:red; margin:0px auto;}#top{ width:50px; height:50px; background:blue;}#bottom{ width:50px; height:50px; background:green; margin-top:10px; margin-left:-20px;} ...
假设我们有如下代码 会发现效果如下所示 子元素的margin-top并没有使子元素与父元素分开，反倒效果等同于给父元素加了一个margin-top； 解决的方法也有，具体为： 1.修改父元素的高度，增加padding-top样式模拟（padding-top:1px;） 2.为父元素添加overflow:hidden; 3.为父元素或者子元素生命元素浮动(float:left;可用但是不推荐) 4.为父元素添加border(border:1px solid transpar...
问题描述：原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” 。header2 设定background=“blue” ,同时给heder1 设定margin-top:10px; 预想的是内层 heder1div 的上边距 maindiv 上边有10px的距离 但事实上 出现一个问题 ，内层div 并没有出现他所预想的那种效果，实际效果是 maindiv 仍然紧贴内层div 整个maindiv 上边框距离浏览器上边 增加了10px 的外边距” 问题描述代码：...
margin并不能够扩大父元素的尺寸:很多初学者以为设置margin外边距能够撑开父元素，其实并不是这样的。代码如下: 蚂蚁部落#main{ width:600px; height:400px; margin:0 auto; background:green;}#inner{ width:50px; height:50px; background:#eee; margin-left:600px;} 上面的代码演示可以看出，内部的子元素只是飞出了父元素，并不会扩大父元素的尺寸，但是如果这个时候给父元素添加overf...
padding对于margin的影响简单介绍:可能很多初学者对于padding是否会影响到margin外边距还不太清楚。只要写段代码测试一下就可以知道了，先看一段代码实例: 蚂蚁部落#box{ width:150px; height:150px; background-color:green; padding:10px;}#inner{ width:50px; height:50px; background:red;} 上面的代码是没有外边距的时候，下面再看加上外边距的情况，代码实例如下: 蚂蚁部落#box{ w...
body在默认情况下是具有margin外边距的:这里只是陈述一个事实，那就是body具有外边距在默认情况下。代码实例如下: 蚂蚁部落 body{ background:blue;}#box{ width:200px; height:100px; background:red; text-align:center; line-height:100px;}蚂蚁部落 从上面的代码可以看出，box元素与外围有一定的空隙，再来看一段代码实例: 蚂蚁部落 body{ background:blue; margin:0px;}#box{ width:...
绝对定位对margin外边距的影响:关于什么是绝对定位和外边距这里就不多介绍了，具体可以参阅以下两篇文章。（1）.绝对定位可以参阅CSS的绝对定位一章节。（2）.外边距可以参阅CSS的外边距一章节。下面就通过代码实例介绍一下绝对定位对于margin外边距的影响。代码实例如下: 蚂蚁部落 *{ margin:0px; padding:0px;}#box{ width:200px; height:100px; background:red; margin-left:50px;}#antzone{ width:100px; ...
css的负margin外边距功能简单介绍:关于margin外边距可能绝对多数朋友都不陌生，它的功能就是设置元素的外边距。代码如下: div{ width:100px; height:100px; margin:10px 5px 15px 20px;} 更多基础应用可以参阅CSS的margin属性一章节。但是与负外边距的很多功能许多人并不是太了解，下面就通过代码实例做一下简单介绍。一.对于普通文档流的影响:关于文档流的基本概念可以参阅什么是文档流一章节。也就是说处于...
在一个div中，margin-top:0px;margin-bottom:0px;不能同时满足，将出现什么情况？ div{margin-top:0px;margin-bottom:0px;} 如果满足 margin-top:0px;就不能满足 margin-bottom:0px; 如果满足 margin-bottom:0px;就不能满足 margin-top:0px; 如何处理？ 哪个写在后面，就以后面的为准吗？ 回复讨论(解决方案) 其实是满足了的 margin的意思是外边距 你可能把ma...