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

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>

 

CSS

Posted by arkgame