inline, block, inline-block

HTML( Hypertext Markup Language )의 요소는 범 으로 "블록 레벨" 요소 와 "인라인" 요소로 분류된다. 인라인 요소는 핀의 흐름을 끊지 않고 요소를 구성하는 태그에 기록된 공간만 표시한다.

inline

요소는 앞이나 뒤에 줄 바꿈을 생성하지 않는 하나 이상의 인라인 요소 상자를 생성한다.
정상적인 흐름에서는 공간이 있으면 다음 요소가 같은 줄에 있다.

.highlight {
  background-color: #ee3;
}

<div>다음 span은 <span class="highlight">인라인 요소</span>로,
영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.</div>

이 예제 <div>에서는 텍스트가 있는 블록 레벨 요소이다.
그 텍스트 안에는 인라인 요소 <span>가 존재한다.
<span>은 인라인이기 때문에 전체 문단이 끊기지 않고서 그려진다.

결과

block

요소는 블록 요소 상자를 생성하여 정상적인 흐름에 있을 때 요소 전후에 줄 바꿈을 생성한다.

<div>다음 p는 <p class="highlight">블록 레벨 요소</p>로,
영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.

결과

inline, block 개념적 차이

콘텐츠 모델
보통 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, 블록 요소는 포함할 수 없다.

서식
기본적으로, 인라인 요소는 문서 흐름에서 줄바꿈을 강제하지 않습니다. 반면 블록 요소는 줄바꿈을 유발한다. (물론 언제나처럼 CSS로 바꿀 수 있다)

참고:display: block 두 값 구문을 지원하는 브라우저는 또는 display: inline가 지정된 경우와 같이 외부 값만 찾을 때 내부 값을 로 설정한다 flow 이로 인해 예상되는 동작이 발생한다.
예를 들어 요소를 블록으로 지정하면 해당 요소의 자식이 블록 및 인라인 일반 흐름 레이아웃에 참여할 것으로 예상할 수 있다.

inline-block

비교할 때 display: inline주요 차이점은 display: inline-block요소에 너비와 높이를 설정할 수 있다는 것입이다.
또한 에서는 display: inline-block상단 및 하단 여백/패딩이 존중되지만 에서는 display: inline그렇지 않다.
비교할 때 display: block가장 큰 차이점은 display: inline-block 요소 뒤에 줄 바꿈을 추가하지 않기 때문에 요소가 다른 요소 옆에 놓일 수 있다는 것이다.

결과