개발/CSS
[CSS] display: block 과 inline-block 그리고 inline 차이
개발햄
2019. 9. 7. 21:22
#display block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
background-color: red;
width: 200px;
height: 200px;
border: 1px solid black;
display: block;
}
</style>
</head>
<body>
<span class="box">1</span>
<span class="box">1</span>
<span class="box">1</sspan>
</body>
</html>
spanBox에 display : block 을 지정해줍니다 그러면 속성에 의해서
옆에 다른 spanBox가 오지못하도록 block (블럭)해버립니다 때문에 사진과 같이 세로열을 가지게 됩니다
#inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
background-color: red;
width: 200px;
height: 200px;
border: 1px solid black;
display: inline-block;
}
</style>
</head>
<body>
<span class="box">1</span>
<span class="box">1</span>
<span class="box">1</sspan>
</body>
</html>
spanBox에 display : inline-block 을 지정해줍니다 그러면 속성에 의해서
가로열을 가지게 됩니다 서로서로 붙습니다.
하지만 옆에 더이상 있을 공간이 없을 경우 밑으로 내려가게 됩니다.
#inline
display: inline 속성은 기존의 설정값을 지웁니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
background-color: red;
width: 200px;
height: 200px;
border: 1px solid black;
display: inline;
}
</style>
</head>
<body>
<span class="box">1</span>
<span class="box">1</span>
<span class="box">1</sspan>
</body>
</html>
