CSS Margin问题 [英] CSS Margin Top Issues
问题描述
不知道为什么我有这么难的时间与这。尝试向位于div内的
添加10px的顶部边距。但是,这不添加我想要的沟槽,只是将包含的div向下推10px。
Not sure why I am having such a hard time with this. Trying to add a 10px top margin to a
that is inside of a div. But that does not add the gutter I want and just pushes the containing div down 10px.
样式
#item{width:738px; height:168px; background-image:url(../images/item_bg.png);margin:0px auto;}
#description{width:314px; height:55px;}
#description p{font:12px arial; color:#666666;margin:10px 0 0 30px;}
HTML / PHP
HTML/PHP
echo "<div id='item'>
<div id='description'><p>{$row['description']}</p></div>
</div>";
如果我使用填充它工作正常,但我想知道为什么margin-top不工作?
If I use padding it works fine but I want to know why margin-top isn't working?
推荐答案
在周围 overflow:hidden
> div 。
Try overflow:hidden
in the surrounding div
.
填充的工作原因以及保证金不可能是以下原因:
The reason why padding is working and margin is not might be the following:
Padding
将在内容及其周围元素之间引入一个沟槽,而 margin
将引入周围元素和最近的solid 。
Padding
will introduce a gutter between the content and its surrounding element, whereas margin
will introduce the gutter between the surrounding element and the nearest "solid element".
这有点混乱,因为我们通常推断 margin
会在周围的元素之间引入一个gutter它的父元素,但这不是真的,除非父元素是solid。诀窍是使用 overflow:hidden
This is a bit confusing because we usually infer that margin
will introduce a gutter between the surrounding elements and it's parent, but that's not true unless the parent element is "solid". The trick is to turn the parent element into something "solid" using an overflow: hidden
将父元素变成一个 / p>
Quick example:
<style>
#parent{
position: relative;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background: #DDD;
/* Try adding here overflow:hidden */
}
#surrounding-element{
margin-top: 50px;
background: #AAA;
}
</style>
<div id="parent">
<div id="surrounding-element">content</div>
</div>
这篇关于CSS Margin问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!