[CSS, HTML] display(디스플레이) inline, inline-block, block

CSS

Dev_jihoon8730 2022. 5. 24. 17:24

줄 바꿈 없이 나란히 배치되는 속성을 의미합니다

대표적인 <span>, <a>, <em> 태그가 있습니다

<body>
  <span>AAA</span>
  <a>BBB</a>
  <em>CCC</em>
</body>

inline-block으로 지정된 요소들은 기본적으로 inline의 속성을 가지지만 가로와 세로를 block처럼 지정해 줄 수 있습니다

span {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: rgb(118, 83, 29);
}

전후의 줄 바꿈이 있고 다른 엘리먼트를 밀어내고 한 줄을 차지합니다

대표적으로 <div>, <h1>, <p>가 있습니다

div, h1, p{
  background-color: yellow;
  
}

<body>
  <div>AAAA</div>
  <h1>BBBB</h1>
  <p>CCCC</p>
</body>