Frontend practice/CSS
CSS inline, block
판다꼬마
2022. 5. 7. 22:23
728x90
div는 기본적으로 block 레벨이고,
span 기본적으로 inline 레벨이다
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- block-level -->
<div></div>
<div></div>
<div></div>
<!-- inline-level -->
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>
CSS
div,span{
width: 80px;
height: 80px;
margin: 20px;
}
div{
background:red;
display:inline-block;
}
span{
background:blue;
display:block;
}결괏값
inline은 내용이 있어야 표출이 된다
물건 자체의 크기로만 된다.
content의 크기에 맞춰서 변경이 된다.
쉽게 말해서 물건 그 자체
내용이 없는데 나오게 하기 위해서는 inline-block으로 쓰면 된다.
상자로 변환되어 content 크기와 상관없이 우리가 정한 height width로 나온다.
쉽게 말해서 한 줄로 정렬이 되어 나오는 상자
block은 한 줄에 한 개만 나오는 상자이다
728x90