[CSS] inline, block, inline-block

13600 ワード
block CSS inline display inline block テキストリンク
CSSのdisplayプロパティのinline、block、inline-blockプロパティ値について説明します.

inline


inline属性を持つタグspan、a、img...tagのタイプを知りたい場合は、ここです。をクリックします.
Inline要素の特徴は次のとおりです.
  • コンテンツがない場合は
    • は表示されません.
  • width、heightにサイズを指定すると、指定したサイズは無視され、内容のサイズのみが表示されます
  • コンテンツが1行に並び、ページがコンテンツより小さい場合は自動改行
    • 1＂＂＂＂＂＂＂＂
    -html-
<span></span>
<span></span>
<span></span>

-css-
span {
  background-color: red;
}
    2▼▼|▼▼▼|▼▼4 |▼▼▼▼▼4 |▼▼▼▼4 |\9660
    -html-
<span>1</span>
<span>2</span>
<span>3</span>

-css-
span {
  background-color: red;
  width: 100px;
  height: 100px;
}

    3▼▼▼▼▼1行に内容を置き、ページが内容より小さいときに自動的に改行する
    -html-
<div>
<span>111111111</span>
<span>222222222</span>
<span>333333333</span>
<span>444444444</span>
<span>555555555</span>
<span>666666666</span>
<span>777777777</span>
<span>888888888</span>
<span>999999999</span>
</div>

-css-
span {
  background-color: red;
  width: 100px;
  height: 100px;
}
div {
  width: 400px;
}

    block


    block属性を持つタグ<span>、width、height...tagのタイプを知りたい場合は、ここです。をクリックします.
    ブロック要素の特徴は次のとおりです.
  • コンテンツが1行を占める
  • width、heightのサイズを指定すると、コンテンツがなくてもスペースが消費されます
    • 1
    -html-
<div>1</div>
<div>2</div>
<div>3</div>

-css-
div {
  background-color: red;
  margin: 10px;
}

    2▼▼|,|▼4|,▼▼▼▼▼▼▼▼▼▼▼▼▼\
    -html-
<div></div>
<div></div>
<div></div>

-css-
div {
  background-color: red;
  width: 50px;
  height: 50px;
  margin: 10px;
}

    inline-block


    inline-block属性を付与するには、CSSをdivに設定します.
    inline-block要素の特徴は次のとおりです.
  • width、heightのサイズを指定すると、コンテンツがなくてもスペースが消費されます
  • コンテンツが1行に並び、ページがコンテンツより小さい場合は自動改行
    • 1▼▼|,|▼4|,▼▼▼▼▼▼▼4;▼▼▼▼▼\9660
    -html-
<div></div>
<div></div>
<div></div>

-css-
div {
  display: inline-block;
  background-color: red;
  width: 50px;
  height: 50px;
  margin: 10px;
}

    2▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼\96
    -html-
<div class="parents">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

-css-
div {
  display: inline-block;
  background-color: red;
  width: 50px;
  height: 50px;
  margin: 10px;
}
.parents {
  width: 400px;
}
    Let Code符号化問題2021年6月17日-Count and Say
    C#フォルダ選択ボックスの使用(C#フォルダを選択、C#フォルダを開く、C#フォルダを参照、C#フォルダを選択する方法)