반응형
inline-block은
1. 브라우저가 block으로 인식함.
2. 높이를 가질 수 있음.
3. 사방에 margin도 가질 수 있음.
4. 바로 옆에 다른 요소가 올 수도 있음.
5. but, 반응형 디자인을 지원하지 않는다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
margin: 20px;
}
div {
display: inline-block;
width: 50px;
height: 50px;
background-color: teal;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
결과
반응형
'2. CSS' 카테고리의 다른 글
| CSS flex box(플렉스 박스)의 특징2 (0) | 2024.11.19 |
|---|---|
| CSS flex box(플렉스 박스)의 특징1 (0) | 2024.11.19 |
| CSS Class(클래스) 태그 간단하게 줄이기 (0) | 2024.11.18 |
| CSS Class(클래스) 적용하기 (0) | 2024.11.18 |
| CSS inline의 margin(마진)은 좌우로만 가질 수 있다. (0) | 2024.11.18 |