divに余裕がありますが、検査官にはありません

Question

<div>には2つの<div>がありますが、facePlusと呼ばれる最初の<div>にはインスペクタでマウスを移動するとマージンがあり、それはそれを持っていないと言う：

.facePlus { 
 
    width: 50%; 
 
    margin-right: 0%; 
 
} 
 
.twittIn { 
 
    width: 50%; 
 
    position: absolute; 
 
    left: 50%; 
 
} 
 
.socialMedia { 
 
    display: inline; 
 
}

<div class="socialMedia"> 
 
    <div class="facePlus"> 
 
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br> 
 
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google plus 
 
    </div> 
 
    <div class="twittIn"> 
 
    <i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br> 
 
    <i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin 
 
    </div> 
 
</div>

Answer 1

私は隣同士にそれらを置くことができますか？あなたのための

利用フレキシボックス

.socialMedia { 
 
    display: flex; 
 
} 
 

 
.socialMedia>div { 
 
    flex: 1 
 
}

<div class="socialMedia"> 
 
    <div class="facePlus"> 
 
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br> 
 
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google plus 
 
    </div> 
 
    <div class="twittIn"> 
 
    <i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br> 
 
    <i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin 
 
    </div> 
 
</div>

Answer 2

2つのアプローチが...

あなたは...側で、あなたのdiv側を配置するdisplayプロパティを使用することができます

それとも、あなたはhereについての詳細を読むことができるflexboxを使用することができます。

.socialMedia { 
 
    display: flex; 
 
} 
 

 
.facePlus, 
 
.twittIn { 
 
    flex: 1; 
 
}

<div class="socialMedia"> 
 
    <div class="facePlus"> 
 
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br> 
 
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google plus 
 
    </div> 
 
    <div class="twittIn"> 
 
    <i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br> 
 
    <i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin 
 
    </div> 
 
</div>