インライン要素とブロック要素の大きさの違いでpadding、marginの位置がずれる

初めに

Progeteで学習中に躓いたところをアウトプットしていきます。

結論

  • インライン要素とブロック要素は大きさが微妙に違ってくる。

  • インライン要素で空白を作った場合と、ブロック要素で空白を作った場合では位置がずれる

インライン要素とブロック要素の大きさの違いについて

インライン要素の画像

  • インライン要素はProgateの文字をぎりぎり囲むような範囲

  • ブロック要素に比べて上下左右ともに狭い

ブロック要素の画像

  • 横は画面一杯に広がる

  • 縦はインライン要素に比べて広い

インライン要素、ブロック要素それぞれにpadding-top:10px;を追加する

HTML
<div class="pro">
           <div class="pro1">Progate</div>
          </div>
           <a class="pro2">Progate</a>
          </div>
CSS
.pro1{
  padding-top:10px;
  border:4px solid;
}

.pro2{
  padding-top:10px;
  border:4px solid;
  
}
プレビュー

  • 上がブロック要素で下がインライン要素

  • ブロックの要素の下とインライン要素の上が重なってきている

ブロック要素、ブロック要素それぞれにpadding-top:10px;を追加する

HTML
<div class="pro1">Progate</div>
<div class="pro2">Progate</div>
CSS
.pro1{
  padding-top:10px;
  border:4px solid;
}

.pro2{
  padding-top:10px;
  border:4px solid;
  
}
プレビュー

  • お互い重ならないように空白が作られている

インラインブロック要素、ブロック要素それぞれにpadding-top:10px;を追加する

HTML
<div class="pro1">Progate</div>
<a class="pro2">Progate</a>
CSS
.pro1{
  padding-top:10px;
  border:4px solid;
}

.pro2{
  padding-top:10px;
  border:4px solid;
  display:inline-block;
  
}
  • aタグはインライン要素のためdisplay:inline-block;を追加することでインラインブロック要素に変更した。
プレビュー

  • 上がブロック要素。下がインラインブロック要素。

  • インラインブロック要素にしたことでブロック要素の下、インラインブロック要素の上が重ならないようにすることができた。

結語

  • インライン要素とブロック要素は上下左右大きさが違う

  • 空白(上下の空白)を作ろうとするとインライン要素とブロック要素では微妙に見た目が変わってくる

  • インライン要素をブロック要素のように上下に空白を作りたいときはインライン要素のプロパティにdisplay:inline-blockを追加する。