1

スタイルとスタイルの間に不要なマージンがblock1あります。このjsFiddleを参照してください。block2display: inline-block

HTML

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div>
        <div id="block2">
            block2
        </div>
    </div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
#container {
    background-color: #f00;
    width: 100%;
    height: 200px;
}
#innercontainer {
    background-color: #0f0;
    width: 200px;
    height: 200px;
    margin: 0px auto;
}
#block1, #block2 {
    display: inline-block;
    background-color: #00f;
    height: 200px;
}

HTMLを次のように変更すると、マージンが消えます。

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div><div id="block2">
            block2
        </div>
    </div>
</div>

またはこれ：

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div><!--
     --><div id="block2">
            block2
        </div>
    </div>
</div>

私は後者の方が好きですが、元のHTMLを使用できるように誰かが解決策を知っているかどうかは疑問ですが、に空白は表示されませんinnercontainer。また、レイアウトに他の問題が発生するため、float: left;両方block1に設定しblock2たり、フローティングにしたりすることは避けたいことに注意してください。position: absolute|relative何か案は？

編集

さて、レイアウトにもっと問題がありました。block1に画像を追加すると、ブロック全体が下に移動し、非常に奇妙になりました（jsFiddleを参照）。私は現在使用してfloat: leftおり、右側の空き領域を消費するdivを追加する方法を理解する必要があります。

4

2 に答える 2

1

cssのこの部分を更新します：

#block1, #block2 {
    display: block;
    float: left;
    background-color: #00f;
    height: 200px;
}

インラインの場合、スペースはスペースを取ります！

編集 ：

安全のために、HTMLのこの部分を変更してください

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div>
        <div id="block2">
            block2
        </div>
        <div style="clear: both"></div>
    </div>

于 2012-11-17T12:04:33.993 に答える
1

使用したい場合display: inline-block;。あなたが言及するように、タグ間のギャップを埋める必要があります。それ自体がインライン要素としても扱われるためです。2つのタグの間にスペースまたは改行がある場合、それらの間にギャップが作成されます。

これを修正するには、周囲のコンテナのfont-sizeを0に設定し、子ノードに戻します。

#innercontainer {
    background-color: #0f0;
    width: 200px;
    height: 200px;
    margin: 0px auto;

  font-size: 0px;

}
#block1, #block2 {
    display: inline-block;
    background-color: #00f;
    height: 200px;

  font-size: 15px;

}

http://jsfiddle.net/SbUwt/27/

于 2012-11-17T12:13:12.003 に答える