display: inline/block/inline-block

display: inline

inlineの場合、内容物のpaddingは効くが、上下方向のmarginは無効、更に最大の特徴として「width/heightの指定が無効」となる。

display: block

縦に並ぶ要素。blockの場合、内容物がブロック化される。divタグやpタグ、h1~h6の見出しタグなど。

  • 幅と高さを指定できる
  • 余白（padding,margin）も上下左右に指定できる
  • 要素自体にtext-alignやvertical-alignの指定はできない

display: inline-block

改行が入らず横に並ぶ要素。要素の並び方はinline的で、要素の中身はblock的な性質を持つ。ボタンを横並びする時に重宝する。

  • 幅・高さの指定ができる
  • 上下左右の余白の指定もできる
  • text-alignとvertical-alignの指定もできる
  • 自動的に横並びにする（inlineの特徴）

この方法はどんなにレガシーなブラウザ環境でも横並びで表示できるというメリットがある。

display: block/inline/inline-blockのwidth:autoの表示仕様

displayプロパティのinline/block/inline-blockのwidthを明示しない初期状態の表示仕様は以下の通り。

  • inline：内容物のサイズに依存（※幅指定無効）
  • block：親要素の幅いっぱいまで広がる
  • inline-block：内容物のサイズに依存（※幅指定無効）

内容物の幅に％を指定した場合、親要素の幅を基準とした幅の設定となる。その親要素に幅指定をしていなかった場合、内容部のwidth自体が「内容物に依存して決定される状態」となってしまっているため、幅が設定されない。

.btns {
  background: #e7e7e7;
  text-align: center;  /* 2つのボタンを中央寄せに配置 */
}
.btns__item {
  /* 横並びするようにインラインブロック化（ブラウザ幅に余裕があるときは横並び、そうでない時は縦並び） */
  display: inline-block;
  width: 80%;
  max-width: 300px;
  margin: 10px;
  border: 1px dashed #999;
}
.btn {
  display: block;  /* 親要素（.btns__item）の幅いっぱいまで広がる */
  padding: 15px;
  background: skyblue;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
}
inserted by FC2 system