초보 개발자의 일기

CSS inline, block 본문

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
저작자표시 비영리 변경금지

'Frontend practice > CSS' 카테고리의 다른 글

SCSS 기본  (0) 2022.08.21
CSS flex box  (1) 2022.05.08
CSS 복합 셀렉터  (0) 2022.05.06
CSS 박스 모델 2  (0) 2022.05.06
박스 모델  (0) 2022.05.05
'Frontend practice/CSS' Related Articles more