inline과 block / box-sizing

lyju777·2024년 1월 24일

CSS

inline과 block, inline-block의 차이

inline

inline요소의 대표적은 태그로는 <span>, <a>, <img>, <input>, <button> 등이 있다.
inline은 연속해서 사용할 경우 다음 줄로 쌓이지 않고 해당 태그의 할당된 공간만큼 차지하며 수평으로 나열이 된다.
width, height로 크기를 지정할 수 없고 padding, margin으로 좌우에만 여백을 지정할 수가 있다.(상하는 불가능)

block

block요소의 대표적인 태그로는 <div>, <p>, <h1>, <h2> 등이 있다.
block은 사용 가능한 최대 너비를 좌우 양쪽으로(width:100%) 넓게 모두 가지게 되며 연속해서 사용할 경우 다음 줄로 쌓이게 된다.
width, height로 크기를 지정할 수 있고 padding, margin을 사용하여 상하좌우의 여백을 지정 할 수 있다.

inline-block

inline-block은 요소를 inline 형태로 배치하면서도 block 요소처럼 동작한다.
inline 요소처럼 다른 inline 요소와 같은 줄에 위치하지만 블록 요소와 같이 width, height로 크기를 지정할 수 있고 padding, margin을 사용하여 상하좌우의 여백을 지정 할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="block-container">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
  </div>

  <div class="inline-container">
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <span>span4</span>
  </div>
</body>
</html>

.block-container {
  border: 3px solid blue;
}

.inline-container {
  border: 3px solid red;
}

.block-container div {
  border: 3px solid green;
  width: 400px;
  display: inline;
}

.inline-container span {
  background-color: red;
  width: 400px;
  display: block;
}

위와 같이 block요소의 태그에는 display: inline속성을 사용하고
inline요소의 태그에는 display: block속성을 사용하게 되면 해당 요소처럼 사용이 가능하다.

box-sizing이란

box-sizing은 CSS의 속성으로 요소의 크기 계산 방식을 지정하는 데 사용한다.
요소의 너비와 높이를 계산할 때 요소의 콘텐츠 영역과 padding, border 등을 포함할지 여부를 결정한다.

content-box (기본값)

요소의 width와 height를 콘텐츠 영역(content area)의 크기로 계산한다.

border-box

요소의 width와 height를 콘텐츠 영역(content area)에 padding과 border를 포함한 전체 영역의 크기로 계산한다.

box-sizing:border-box를 사용하는 이유

box-sizing을 border-box로 설정하면 요소의 크기를 예측하기 쉽고 레이아웃 설계 시 요소의 크기를 조정하기가 더 간편해진다. padding과 border를 추가하더라도 요소의 크기가 변하지 않기 때문에 레이아웃이 예상한 대로 유지될 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="container">
    <div class="box1">
      box1
    </div>
    <div class="box2">
      box2
    </div>
    <div class="box3">
      box3
    </div>
  </div>
</body>
</html>

.container {
  background-color: gray;
}

.box1 {
  width: 200px;
  height: 200px;
  background-color: white;
  border:  3px solid blue;
  box-sizing: content-box;
  padding: 50px;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: white;
  border:  3px solid red;
  box-sizing: border-box;
  padding: 50px;
}

.box3 {
  width: 200px;
  height: 200px;
  background-color: white;
  border:  3px solid green;
  padding: 50px;
}

box1은 default값인 box-sizing: content-box;을 지정하고 box2는 box-sizing: border-box;을 지정하였다.
box3은 box-sizing속성을 지정하지 않았지만 default값으로 content-box속성을 가지고 있어 box1과 같은 크기로 화면에 보여지는것을 확인 할 수 있다.