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屋！