「CSS」display:inline-blockでブロック要素ボックスを生成する

2014年9月19日2021年10月8日

構文
display:inline-block
この要素はブロック要素ボックスを生成しますが、
周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。

使用例

<style>
/*inline-block 横に並べる 幅と高さを指定*/
  .cft {
    display: inline-block;
    height: 60px;
    width:150px;
    background-color: skyblue
  }
 
</style>
<!--inlineのように横に並べて widthとheightの指定-->
<div class="cft">AA inline-block</div>
<div class="cft">BB inline-block</div>
<div class="cft">CC inline-block</div>
<div class="cft">DD inline-block</div>