div間の望ましくない垂直方向の間隔を取り除く方法

Question

私は、ウェブサイトのフロントエンドを開発している間、ちょっとした不具合に遭遇しました。私はCSSに堪能ですが、幻想的ではありません。とにかく、私は自分の問題を示すjsFiddle hereを作成しました。

私のウェブサイトの各ページには、コンテンツセクションの上部に、私はバナーイメージを持っています。私はコンテンツからこのバナーを分離する2つのカラーディバイダを配置したいと思います。 （私のデザイナーが私のデザイナーに与えたモックアップに示されているように）

私は純粋なCSS + HTMLでこれをやってみたいと思いますが、イメージを挿入するだけではありません。

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;"> 
<div> 
    <div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div> 
</div> 

（それだけでデモの目的のためだ、インラインCSSご容赦ください。また、残念ながら、私は改行の2番目のdivを入れて、それをインデントた場合、それは空白を作成する）

私は問題仕切りと画像との間に大きな隙間があることである。私はマージンを追加しようとしました：0pxとパディング：0pxのすべての関連する要素に、空白はまだそこにあります。

誰かが私を助けてくれますか？あなたはその後、相対的な位置を作ることができ

おかげで、 YM

Answer 1

私にとっては、垂直方向の問題です。あなたは（間違っていない、ただ物議練習）負のマージンを使用する必要はありません道

.banner { 
    display: block; 
    width: 100%; 
} 
div { 
    height: 10px; 
    vertical-align: top; 
} 

を試すことができます。

は、あなたがこれについて検索することができhere

Answer 2

は何かマイナスにトップを設定します。例：

position: relative; 
top:-10px; 
left:0px; 

Answer 3

これは実際に問題

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg"> 
<div style=""> 
    <div style="float:left;width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%;float:left; height:10px; display: inline-block; background: #E5C697;"></div> 
</div> 

CSS

.banner { 
    width:100%; 
float:left; 
} 

http://jsfiddle.net/eLbUU/4/

Answer 4

まずフロートされ、軽く茶色のdivに暗い茶色を置きます。このように、ウィンドウのサイズを変更すると、サイジングの割合や間隔が損なわれません。

<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div> 

スペースでは、他にも言及しているように、余白や浮動小数点数を使用できます。ディスプレイ置く

.banner { 
    width:100%; 
    /* margin-bottom to the banner is negative which moves the div upward */ 
    margin-bottom: -10px; 
} 

fiddle here

Answer 5

：ブロック。イメージクラスとfloat：left;他のすべての要素が役に立ちます。

.banner { 
    width:100%; 
    display:block; 
    float:left; 
} 

http://jsfiddle.net/bjliu/eLbUU/7/（編集：申し訳ありませんが、間違ったリンク）もIMG自体が、私はIMGにストライプを引き締めることができた隠されたオーバーフローと表示ブロックで確認して、表示ブロックを使用してdivを浮動

Answer 6

：fiddle

.banner { 
    width:100%; 
    display: block; 
    overflow: hidden; 
} 
div div{ 
    float: left; 
}