728x90
1. Block Element : 한 줄에 하나의 요소만 포함 할 수 있는 HTML 요소
EX) p, h1~h6, ul, ol, div, blockquote, form, hr, table, figure
- 기본 너비값: 100%(폼 엘리먼트 제외)
- 너비 값, 높이 값 가질 수 있음
- 상하좌우 모든 마진 값을 가질 수 있음
2. Inline Element : 한 줄에 여러 요소를 포함 할 수 있는 HTML 요소
EX) img, br, sub, span, input, laber, a, button, b, l, s
- 기본 너비 값: 컨텐츠 너비 값
- 너비 값, 높이 값 가질 수 없음
- 상하 마진 가질 수 없음(이미지 제외)
3. inline-block
- block은 한 중레 여러 요소를 포함 할 수 없고 inline은 너비와 높이 값을 가지를 수 없는데 이를 위한 해결책
- diplay: inline-block
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레이아웃 스타일</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
반응형
'2019백업' 카테고리의 다른 글
| 9.박스모델-Box Model(속성: box-sizing: border-box) (0) | 2019.07.22 |
|---|---|
| 8. 박스모델 (border, margin, padding) (0) | 2019.07.22 |
| 6. CSS 배경 색상 및 이미지 제어하기 (속성: background-image, background-repeat) (0) | 2019.07.22 |
| 5. CSS 목록 스타일 (0) | 2019.07.22 |
| 4. CSS Text (0) | 2019.07.22 |
