HTMLとCSS IとDIVを分離できません

Question

ウェブサイトのメニューバーを作成しようとしていましたが、私が完全に理解していなかった動作に遭遇しました。基本的には、ヘッダーと段落要素を含む別のdivを持つDIV内にFont-Awesomeアイコンが必要です。 FAのアイコンから少しDIVを分離するために、私はアイコンへのマージンを指定しましたが、参照として親DIVのエッジを参照として使用していたアイコンを参照として使用しました。

HTML：

<div class="info-box"> 
    <i class="fa fa-clock-o fa-3x"></i> 
    <div class="info-keeper"> 
    <h3>Mon - Sat: 9:00 - 18:00</h3> 
    <p>Sunday closed</p> 
    </div> 
</div> 

CSS：

#first-row .infos .info-box { 
    float:left; 
    padding: 5px; 
    min-width: 200px; 
} 
#first-row .infos .info-keeper{ 
    padding-right: 15px; 
} 
#first-row .infos .info-box h3 { 
    font-size: 14px; 
    font-weight: bold; 
    margin-top:0px; /*because of bootstrap h3 */ 
    margin-bottom:5px; 
} 
#first-row .infos .info-box i { 
float:left; 
padding-right: 15px; 
} 

誰もがアイコンとDIVの間にスペースを作成する方法のアイデアを持っていますか？

更新日： 私は水平に間隔を空けておきたいと思います！

Answer 1

もっと説明できますか？私はあなたが試してみたいと思っていcorretly場合 -

#first-row .infos .info-box { 
     float:left; 
     padding: 5px; 
     min-width: 200px; 
    } 
    #first-row .infos .info-keeper { 
     display: inline-block; 
     vertical-align: middle; 
     margin-right: 15px; 
    } 
    #first-row .infos .info-box h3 { 
     font-size: 14px; 
     font-weight: bold; 
     margin-top:0px; /*because of bootstrap h3 */ 
     margin-bottom:5px; 
    } 
    #first-row .infos .info-box i { 
    display: inline-block; 
    vertical-align: middle; 
    margin-right: 15px; 
    } 

垂直あなたが好きなトップ、ミドル、ボトムを合わせます。

Answer 2

インラインリストは、コンテンツとアイコンの並び替えに最適です（添付の例を参照）。

注意点を表示するためにクラスとスタイルを取り除いていますが、必要に応じて戻すことができます。この場合、リスト要素に埋め込みを追加したことを知っているだけです。これに合わせて調整することができます。確かに

.inline-list { 
 
list-style: none; 
 
margin:0; 
 
padding: 0; 
 
} 
 

 
.inline-list p, 
 
.inline-list h3 { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
.inline-list li { 
 
display: inline-block; 
 
padding: 0 0 0 1em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="info-box"> 
 
<ul class="inline-list"> 
 
<li><i class="fa fa-clock-o fa-3x"></i></li> 
 
<li><h3>Mon - Sat: 9:00 - 18:00</h3> 
 
    <p>Sunday closed</p></li> 
 
</ul> 
 
    
 

 
    
 

 
</div>