4

質問を教えてください：

別の div 内に div を配置すると、この 2 番目の div ではプロパティmargin-leftを使用できずmargin-top、親 div の位置を変更しなければなりませんか?

代わりに使用する必要がありますpaddingか??

例:

余白をいじる: http://jsfiddle.net/zyEYj/1/

余白のないフィドル: http://jsfiddle.net/zyEYj/2/

MOTHER DIV 内のパディングをいじる: http://jsfiddle.net/zyEYj/3/ (これは私が望む最終的な効果ですが、パディングを使用し、の高さを変更する必要があります#header)

コード:

<div id="header" class="container">
    <div class="logo">
        <a href="index.asp"><img src="imagens/logo.png" /></a>
    </div>
</div>​

CSS:

body{
background:#d3f1fc;        
}

#header{
    height:135px;
    background:#ee4b14;
    padding-top:35px;
    padding-left:21px;
}

.container {
    margin:0 auto;
    width:960px;
}

.logo{
    width:382px;
    height:114px;
    background:#FFCC00;
}​
4

3 に答える 3

3

この動作は と呼ばれmargin collapseます。隣接する 2 つのマージンは互いに崩壊し、絶対値が高い方が優先されます。

paddingこれは、(親要素を介して、またはborder親要素上で)マージンを分離するかposition: relative、子要素を使用してその位置を調整することによって無効にすることができます。

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

普通

/*
    these margins will collapse, and result in a total margin of 15px
*/
.parent
{
    margin: 5px;
}

.child
{
    margin: 15px;
}

パディング/ボーダー ソリューション

/*
    these margins will be separate, resulting in a total margin of 20px
    plus the border or padding of 1px
*/
.parent
{
    margin: 5px;
    padding: 1px; /* or border: 1px; */
}

.child
{
    margin: 15px;
}

位置: 相対ソリューション

/*
    there is only one margin here, and the child
    is positioned relative to where it would usually be rendered
*/
.parent
{
    margin: 5px;
}

.child
{
    position: relative;
    top: 15px;
}
于 2012-12-19T13:14:57.633 に答える
1

これは通常の動作です。http://www.w3.org/TR/CSS2/box.htmlは、理解を深めるための良い読み物です。

padding子の上を移動するには、親でを使用する必要があります。

このように: http://jsfiddle.net/88ATa/

よろしくお願いします。ジョナス

于 2012-12-19T13:04:12.960 に答える
0

これを解決する 1 つの方法は、containerdiv を絶対位置に配置して、内側の div がコンテナーの境界によって制限されるようにすることです。追加するだけです

.container {
     position:absolute;
 }

動作します。しかし、なんらかの理由で、絶対的な配置はあなたが探しているものではないかもしれません. たとえば、ページ レイアウトが変更される場合があります。

参照: http://jsfiddle.net/zyEYj/13/

于 2012-12-19T13:16:29.077 に答える