给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，可以用下面的方法解决，不过这些方法跟你的界面其他样式也有一定的关系，试一下或许有意想不到的效果。
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；对应的子元素的margin-top减少1px，很好用）
2、为父元素添加overflow：hidden；样式即可（margin-top和子元素高度要在父元素的可控范围之内）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent，或者用一个和背景色一样的边框，这种用起来很完美）
5、为父元素或者子元素声明绝对定位（当然是对定位要比较熟悉）
分享到：
相关推荐
本文介绍了css中子元素设置margin-top为什么影响了父元素，分享给大家，具体如下： <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...
hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码： 复制代码代码如下: ”box1″> ”box2″>...
子元素的margin-top如下html其实我们给子元素设置一个margin-top，是想他相对父层节点顶部偏移20px，但是结果是如图：子层元素没有相父元素去
如题。 问题很奇葩。元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效。同学经验提示，对该元素的父元素属性设置成 overflow:hidden; 问题就解决了。
通常来说，margin是设置元素的外边距，正常情况下设置margin值时应该是父元素相对于浏览器定位，子元素相对于父元素定位；而现在设置了 margin-top: 50px，页面却没效果这就说明是margin塌陷。 那什么是margin塌陷呢...
1、给父元素定义font-size:0; 浮动子元素定义需要的font-size， 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width...
(1)如何解决父元素的第一个子元素的margin-top越界问题 1)为父元素加border-top: 1px;——有副作用 2)为父元素指定padding-top: 1px;——有副作用 3)为父元素指定overflow:hidden;——有副作用 4)为父元素添加前置...
想要实现这样一个父元素中的子元素都是居中的 只需在父元素上加样式 复制代码代码如下:{display: flex;flex-direction: column;align-items:center;} 设置为flexbox布局，方向为纵向排列，第三句是使其居中。 如果...
6.em 相对父元素乘以倍数 7.rem 相对于根元素(html,body)乘以倍数 8.% 相对单位 2.颜色单位（取值） 1.颜色英文单词 blue,red,green,yellow.... 2.rgb（r,g,b） r:red; g:green; b:blue; r,g,b:0-255 ...
CSS属性 一、 CSS定位区别 static:默认值，设置坐标无效 ... 特征： 1. 脱离文档流，不占位置 2. 默认参考浏览器零点 3. margin+left/top relative：相对定位 ...1. 占据文档流，占位置 ...当子元素有浮动并且父元
克隆一个元素用cloneNode就可以了，它有一个bool参数，表示克隆是否包含子节点。 程序第一步就是克隆原table： this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._...