개발햄비

[CSS] display: block 과 inline-block 그리고 inline 차이 본문

개발/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>

저작자표시 비영리 변경금지

'개발 > CSS' 카테고리의 다른 글

[CSS] Pseudo Selector 정리  (0) 2019.09.12
[CSS] 세로 오픈 메뉴 예제  (0) 2019.09.08
'개발/CSS' Related Articles more