浏览器显示如下 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)叠加 只有普通文档流中块级元素(块框)的垂直外边距才会发生外边距叠加。行内框、浮动框和绝对定位框之间的外边距不会叠加 两个相邻兄弟块框 父元素与子元素，并 父元素没有内边距或边框时 ,它们的顶和/或底外边距也会发生叠加。 当父元素没有内边距或边框时 当父元素有内边距或边框时 无论子元素是否有内边距或者边框都不会影响叠加 自己的垂直上下外边距叠加 叠加具有组合性，而...
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...