Block-level & Inline
| 요소 유형 | 특징 |
|---|---|
| 블록 레벨 요소 | 1. 블록 레벨 요소는 줄 바꿈이 일어난다. 2. 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있다. 3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있다. 4. margin, width, height 속성을 정의하면 모두 적용됩니다. 이런 특성 때문에 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용할 수 있습니다. |
| 인라인 요소 | 1. 줄바꿈이 일어나지 않는다. 2. 텍스트와 인라인 요소를 자식 요소로 포함할 수 있다. 3. 블록 레벨 요소를 자식 요소로 포함할 수 없습니다. 4. 상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않습니다. 상, 하 여백은 margin이 아니라 line-height 속성에 의해 발생됩니다. |
Block-level & Inline 종류
| 요소 유형 | 종류 |
|---|---|
| 블록 레벨 요소 | p, h1~h6, ul, ol, div, blockquote, form, hr, table, fieldset, address |
| 인라인 요소 | a, img, object, br, sub, sup, span, input, textarea, label, button |
인라인과 블록의 합성 속성 inline-block
inline-block이라는 속성은 인라인과 같인 한 줄에 표현하면서도 margin, width, height 속성을 정의하면 표현해 줍니다. 이 속성을 기본적으로 가지고 있는 태그가 없기 때문에 따로 inline-block이라 선언을 해야합니다.
<head>
<style>
.inline-div {
display:inline-block;
}
<style>
</head>
<body>
<div class="inline-div">
블록1
</div>
</body>- 상, 하단 외부 여백 속성(margin-top, margin-bottom)을 정의할 수 있습니다.
- inline-block 요소의 상, 하 여백을 margin, line-height 두 가지 속성 모두를 통해 설정할 수 있습니다.
- 너비(width)와 높이(height) 속성이 적용됩니다.
출처: https://engkimbs.tistory.com/912 [새로비]
삽질중