Display 속성 | Minstudio

요소의 배치 방식을 결정하는 Display

HTML 요소들은 기본적으로 자신이 어떻게 화면에 그려질지 성질을 가지고 있습니다.

속성 (Property)	설명 및 특징
`block`	항상 새로운 줄에서 시작하며, 가로 100%를 차지합니다. (예: `<div>`, `<p>`) width/height 지정 가능.
`inline`	줄을 바꾸지 않고 글자처럼 옆으로 흐릅니다. (예: `<span>`, `<a>`) width/height 지정 불가능.
`inline-block`	옆으로 나란히 배치되면서도 width/height 지정이 가능합니다. (버튼 등에 주로 사용)
`none`	화면에서 아예 사라집니다. (공간도 전혀 차지하지 않음)

<div style="background: #f8fafc; border: 2px dashed #cbd5e1; padding: 10px; border-radius: 8px;"> <div class="common-box block-box">1. Block (크기+마진 적용)</div> <span class="common-box inline-box">2. Inline (크기/상하마진 무시됨!)</span> <span class="common-box inline-box">옆으로 딱 붙습니다.</span> <br><br> <div class="common-box inline-block-box">3. Inline-Block</div> <div class="common-box inline-block-box">크기와 여백 모두 적용됨!</div> </div>