<!doctype html>
<html>
<head lang="ko">
<meta charset="utf-8"/>
<title>dislplay: inline & inline-block 비교</title>
<style></style>
<script></script>
</head>
<body>
<div style="background-color: red; width: 100%; height: 100px;"></div> <!--default block-->
<div style="display:inline; background-color: green; width: 100%; height: 100px;">text</div> <!--div 규정된 사이즈를 무시하고 tag 내에 text를 감싸는 div box로만 표시-->
<div style="display:inline-block; background-color: blue; width: 50%; height: 100px;"></div> <!--div 속성값 width/height 값만 블록으로 감쌈-->
</body>
</html>
'코딩' 카테고리의 다른 글
| float (0) | 2021.01.06 |
|---|---|
| CSS flexible (0) | 2020.05.05 |
| CSS Layout - The display Property (0) | 2020.04.20 |
| CSS Tables (0) | 2020.04.05 |
| CSS Lists (0) | 2020.04.05 |