与父母分部相关的子分部保证金 [英] Child div margin in relation to parent div
问题描述
我想了解为什么我不能移动子div（ex） 。25px），关于父div，通过使用margin-top：25px，除非我给父div一个边界。我在想，小孩div使用边界作为参考点，这就是为什么一旦边界被应用边界顶部实际上工作。这是一切都很好，但在我正在处理的具体示例中，父div具有背景图像，我不想给它一个边框。但没有边界，小孩div不会移动！
< body>
< div id =main>
< div id =child>
< / div>
< / div>
< / body
#main {width：500px;
border：1px纯黑色;
height：500px;
背景颜色：红色;
margin：auto;
margin-top：200px;
}
#child {width：100px;
height：100px;
背景：蓝色;
职位：亲属;
top：5px;
之前，我通过向父div添加一个小填充（1px）来解决此问题，然后在子div上使用margin。
I have a simple child div nested inside a parent div, like so...
I am trying to understand why I cannot move the child div down (ex. 25px), in relation to the parent div, by using margin-top: 25px, unless I give the parent div a border. I am thinking that the child div is using the border as a reference point, which is why the margin-top actually works once the border is applied. That is all fine and dandy, but in the specific example I'm working on, the parent div has a background image, and I don't want to give it a border. But without a border, the child div won't move!
<body>
<div id="main">
<div id="child">
</div>
</div>
</body
#main {width: 500px;
border: 1px solid black;
height: 500px;
background-color: red;
margin: auto;
margin-top: 200px;
}
#child {width: 100px;
height: 100px;
background: blue;
position: relative;
top: 5px;
}
I had this issue few days ago , I resolved it by adding a small padding (1px) to the parent div , and then use margin on the child div.
这篇关于与父母分部相关的子分部保证金的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
