2つの要素の隙間をなくしてみた HTML,CSS復習14

この記事でわかること

 

二つの要素の隙間をなくす方法がわかる

2つの要素を横に並べると隙間ができてしまうんだけど・・

困るよね！今回はその隙間をなくしてみるよ

でもどうやって隙間をなくすの？

一度フォントサイズを初期化してから、また戻せばいいんだ

二つの要素の隙間をなくす方法

まず一度フォントのサイズを0として初期化します。

フォント初期化のスタイルシート

div oya{
font-size: 0px;　  /*fontsizeの初期化*/
}

次に要素を横に並べるスタイルシートを作って

ここでフォントサイズを元に戻します

div.yoko2{
display: inline-block;   /*要素を横に並べる*/
font-size: 16px;           /*フォントサイズを元に戻す*/
}

四角を作るスタイルシート

div.sikaku2{
border: 1px solid pink; /*境界線の幅1px solidは実線　色はpink*/
padding: 10px; /*領域と文字との余白10px*/
}

記事中には次のように記述します。

<div class="oya">  /*最後に閉じる*/
      <div class="yoko2">
             <div class="sikaku2">好きな食べ物</div>
       </div>
      <div class="yoko2">
              <div class="sikaku2">お寿司</div>
       </div>
</div>

するとこうなります。

二つの要素の隙間がなくなりましたね！

好きな食べ物

お寿司

↓このブログで使っているHTML,CSSのテクニックは全て当ブログで説明済みです。↓