브라우저상에서 컨텐츠들의 레이아웃을 짜다보니 컨텐츠 혹은 element끼리의 간격을 조정하는 것이 매우 중요하다는 것을 알게 됐다.

그 과정에서 각 element의 출력방식을 정하는 display 속성에 대해 알게 됐다.

display 속성에는 block 방식과 inline방식이 있다.
block방식의 element들은 그 줄 전체를 차지하며 자연스럽게 다음 element는 줄이 넘겨진 상태로 작성이 된다.

block element:h1

next black element:h2

inline:radio inline:radio

<h1>block element:h1</h1> <h2>next black element:h2</h2>

<input type="radio"> inline:radio <input type="radio"> inline:radio

inline방식은 margin값과 padding값을 가질 수 없는 특성이 있다. 만약 레이아웃 위치 조정을 위해 inline방식의 element에 margin과 padding에 값을 주고 싶다면
display 속성을 inline-block으로 처리하면 된다.

inline-block은 inline을 기본방식으로 갖되 block의 성질을 가져오는 방식이다.

inline-block

inline-block

<h1 style="display:inline-block;margin-right:100px">inline-block</h1> <h1 style="display:inline-block">inline-block</h1>