マージン先頭へ別のdiv内

Question

私は2つのdivを持っています。背景イメージがあり、2番目のdivにマージンを追加したいのですが、ホワイトスペースを作成しています。

他のdivの中にdivを保持しているときに、どのようにして余白を追加できますか？

<div class="background"> 
    <div class="logo"> 
    </div> 
</div> 

.logo { 
    background-image: url(image/logo2.png); 
    height:40px; 
    width:400px; 
    margin-left:100px; 
    display:block; 
    margin-top:20px; 
} 

.background { 
    background-image: url(image/empback.png); 
    width:100%; 
    height:94px; 
    min-width:1345px; 
} 

Answer 1

あなたはここにcsspositionプロパティを利用することができます。

サンプルコード

<div class="background"> 
    <div class="logo"> 
    </div> 
</div> 

.logo 
{ 
    background-image: url(image/logo2.png); 
    height:40px; 
    width:400px; 
    margin-left:100px; 
    display:block; 
    position:absolute; 
    top:20px; 
} 

.background 
{ 
    background-image: url(image/empback.png); 
    width:100%; 
    height:94px; 
    min-width:1345px; 
    position:relative; 
} 

margin-top:20px;を削除し、.logoためpositionとtopプロパティを追加します。

Answer 2

あなたはこの問題に関連している

Demo

.background{ 
    background: #f00; 
    width:100%; 
    height:94px; 
    min-width:1345px; 
    overflow: auto; 
} 

ちょうど shareへのリンクを得た親要素に overflow: autoを使用することができます。

---

また、この方のより良いアプローチではなく、あなたが唯一のフロート内の要素を保持しませんtopとposition: relative;、left、rightとbottomプロパティを、使用する必要がありますposition: absolute;を使用してのものであり、それはまた、ポジショニングからあなたを救います同じブロック内の他の要素。

Answer 3

コードを実行してください。

位置とトップ値を変更するだけで、結果を得ることができます。

.logo{ 
position:relative; 
top:10px; 
background-color:black; 
height:40px; 
width:400px; 
margin-left:100px; 
display:block; 
margin-top:20px; 
} 

.background{ 
    position:absolute; 
    background-color:green; 
width:100%; 
    top:50px; 
height:94px; 
    min-width:1345px; 
}