display: block;とdisplay: inline;

ブロックレベルとインライン

CSSで色を付ける以外何もしないで<div>ブロックスタイル</div>と<span>インラインスタイル</span>の挙動をみると

CSSでは display: inline;　＆ display: block; を使えばインライン要素、ブロックレベル要素は操作で変えれる。

上記の例では、
class="block-example" の要素は各行に独立して表示されますが、
class="inline-example" の要素は同じ行に並びます。これにより、各ディスプレイプロパティの違いが視覚的に理解できるでしょう。
コードは以下です

=HTM=
                <div class="block-example">これはブロック要素です。</div>
                <div class="block-example">これは別のブロック要素です。</div>
            
                <span class="inline-example">これはインライン要素です。</span>
                <span class="inline-example">これは別のインライン要素です。</span>
                
        
                <div>これはブロック要素です。</div>
                <div>これは別のブロック要素です。</div>
        
                <span>これはインライン要素です。</span>
                <span>これは別のインライン要素です。</span>
        
        =CSS=
                <style>
                .block-example {
                    display: block; 
                    background-color: lightblue;
                    margin: 10px 0;
                    padding: 10px;
                    width: 50%;
                }
        
                .inline-example {
                     display: inline;
                    background-color: lightcoral;
                    margin: 0 10px;
                    padding: 5px;
                }
            </style>
        
            

display: block;ついて説明します

独自の行を占有:

display: block; を持つ要素は独自の行を占有します。そのため、他の要素はその前後に配置され、横には並びません。

幅と高さ:

幅（width）と高さ（height）のプロパティが適用されます。デフォルトでは、親要素の幅いっぱいに広がります。

マージンとパディング:

上下左右すべてのマージン（margin）とパディング（padding）が適用されます。

例:

<div>, <h1>, <p> などの要素はデフォルトでブロックレベルの要素です。

display: inline;ついて説明します

同じ行に並ぶ:

display: inline; を持つ要素は他のインライン要素と同じ行に並びます。例えば、テキストや他のインライン要素と一緒に配置されます。

幅と高さ:

幅（width）と高さ（height）のプロパティは無視されます。要素の内容によって自動的に調整されます。

マージンとパディング:

上下のマージン（margin-top, margin-bottom）は無視され、左右のマージン（margin-left, margin-right）のみが適用されます。

例：

<span>, <a>, <em> などの要素はデフォルトでインライン要素です。

<ul>タグでサンプル写真
•  <li>
    <img src=>

  

    <h2>で表題

    <p> https://picsum.photosで写真表示してみた

 </li> </ul>

CSSでレイアウト表示 （HTML）

<ul class="left_cont">
インラインブロック
• テキストが入ります
• <li class="left_cont-inner">-</li>
• テキストが入ります
• テキストが入ります
</ul>

<ul class="right_cont">インラインブロック
• <li class="right_cont-inner">

  <h2>見出しが入ります

  <p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。

  </li>
• <li class="right_cont-inner">

  見出しが入ります

  本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。

  </li>
</ul>

CSSでレイアウト表示 （code）

              ul {
              margin:  0;             /* デフォルトCSS打ち消し */
              padding:  0;            /* デフォルトCSS打ち消し */
              list-style:  none;      /* デフォルトCSS打ち消し */
          }
           
          .left_cont {
              width:  30%;            /* 幅指定 */
              display: inline-block;  /* インラインブロックにする */
              border: solid 1px;      /* 枠線指定 */
          }
           
          .right_cont {
              width: calc(70% - 8px); /* 幅指定 */
              display: inline-block;  /* インラインブロックにする */
              vertical-align:  top;   /* 横の揃え */
          }
           
          .right_cont-inner {
              border:  solid 1px;     /* 枠線指定 */
              padding: 0 20px;        /* 余白指定 */
              margin-bottom:  20px;   /* 要素同士の空き指定 */
          }
           
          .left_cont-inner {
              padding:  10px;         /* 余白指定 */
          }
           
          .left_cont-inner:nth-child(odd) {    /* odd 一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。*/
              background-color: #ddd; /* 背景色指定 */
          }