父元素与子元素之间的margin-top问题(css hack)（转载）

情况：

　　父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。

解决方法：
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位

时间： 2024-10-02 12:55:24

父元素与子元素之间的margin-top问题(css hack)（转载）的相关文章

父元素与子元素之间的margin-top问题

做项目的时候遇到了这个问题. 给父元素下的子元素设置margin-top属性,但是没有达到预期的效果,反而把布局搞乱了.如图: 给子元素设置margin-top属性之后,父元素和子元素之间的距离没有变化,反而是父元素和页面中的其他元素之间产生了margin.(黄色区块实际高度是1px,这里是为了能看清楚,设置高一点.) 解决办法:给父元素添加overflow:hidden. 在项目中给父元素设置了overflow属性之后,果然解决了问题. 不过目前还不知道原理是什么.正在上班,时间紧,任务重,没

css父元素和子元素之间margin-top的问题

问题:父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素的盒子也会受到子元素的margin-top值的影响. 原因:所有毗邻的两个或者多个元素的margin将会合并为一个margin共享之.毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容.padding或者border分隔.其中float和position(css2.1浮动元素和绝对定位元素不参与margin折叠) 解决方法: 1.修改父元素的高度,增加padding-top样式模拟(paddin

css设置时父元素随子元素margin值移动

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div class="box1"> <div class="box2"> <div class="content"> <div class="margin">123</div> &l

关于css中父元素与子元素之间margin-top的问题

之前在使用经常遇到下面的问题: html: 1 <div class="top"> 2 <div class="one">I'm the first!</div> 3 <div class="two">I'm the second!</div> 4 </div> css: .one{ width: 100px; height: 100px; background: red;

父元素与子元素之间的margin-top问题(css hack)

hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

css选择其指定标签父元素的子元素（first-child 与 first-of-type之间的区别）

一.选择元素父级的子元素(包含其它不相同的元素) (1)li:first-child { }; 选择第一个子元素(注意这里没有括号) (2)li:last-child { }; 选择ul中最后一个子元素 (3)li:nth-child(3) { }; 顺数第三个元素 (4) li:nth-last-child(3) { }; 倒数第三个二.选择父级元素的相同子元素(不包含不相同的子元素) (1)li:first-of-type { } 选择第一个li (2)li:last-of-type{ }

jquery选择器如何获取父级元素、同级元素、子元素

一.新建页面 1 <ul> 2 <li>list item 1</li> 3 <li>list item 2</li> 4 <li class="third-item">list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 </ul> 8 9 <p>Hell

判断一个元素是否是另一个元素的子元素或者父元素

判断一个元素是否是另一个元素的子元素或者父元素:在实际应用中有时候会判断某个元素是另一个元素的子元素或者父元素,下面就通过代码实例介绍一下. //判断:当前元素是否是被筛选元素的子元素 jQuery.fn.isChildOf=function(b){ return (this.parents(b).length>0); }; //判断:当前元素是否是被筛选元素的子元素或者本身 jQuery.fn.isChildAndSelfOf=function(b){ return (this.closest

jQuery中兄弟元素、子元素和父元素的获取

我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行获取和操作. jQuery提供的方法上来就把jQuery提供的方法摆在这里是不是有点不好呀,不过,我们从jQuery的方法名称上就能知道这些方法是干嘛的了. parent(selector) 查找父元素,可传入selector进行过滤(下同) parents(selector) 查找所有的祖先节点