htmlのsapnがくっついて表示される

Question

tagsの中のspanが以下のように離れずくっついて表示されます。改善法を教えてください

  <main>
    <div class="container">

      <div class="hotels">
        <div class="mainrequirements">
          <span class="">料金の低い順</span><span class="">高評価</span><span class="">おすすめ</span>
        </div>

        <div class="hotel">
          <div class="hotelpicks">
            <div class="mainpick">
              <img src="imgs/14407458-L-imagenavi.jpg" width="400" height="400" alt="">
            </div>
            <div class="others">
              <img src="imgs/14407458-L-imagenavi.jpg" width="100" height="100" alt="">
              <img src="imgs/14407458-L-imagenavi.jpg" width="100" height="100" alt="">
              <img src="imgs/14407458-L-imagenavi.jpg" width="100" height="100" alt="">
            </div>
          </div>

          <div class="hotelinfo">
            <h2>SARROSA INTERNATIONAL HOTEL</h2>
            <div class="tags">
              <span>無料WI-FI</span><span>駐車場</span><span>朝食付き</span><span>キャンセル無料</span>
            </div>
            <div class="rating">
              <span>非常に良い</span><span>8.5</span>
            </div>
            <div class="price">
              <span>＄30/1泊(1人)</span>
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>


  </main>

.clear {
  clear: both;
  /*floatの解除、ここがポイント*/
}

.container {
  width: 960px;
  margin: 0 auto;
  padding: 40px 0;
}

main span {
  text-align: center;
}

.mainrequirements span {
  border: solid 1px #808080;
}

.mainrequirements span .selected {
  background-color: #ffffff;
  color: #1e90ff;
}

.hotelpicks{
  float: left;
}
/*hotelinfo*/
.hotelinfo{
  float: right;
}
.hotelinfo .tags{
  display: inline-block;
  border: solid 1px #228b22;
  font-weight: bold;
  color: #228b22;
}

Comments

[退会済みユーザー]

span の基本仕様はインライン要素だから余白はないんのは当たり前なんですが
なにかおかしいのです？

Answer 1

.tags span ~ span {
    margin-left: 5px;
}

Answer 2

spanのところにCSSでmarginを設定してください
margin: 0 5px;