「CSS」ボックスモデル

ケースモデル

サイズ

<div class="block">
  Lorem ipsum dolor sit amet
</div>
<span class="inline">
  Lorem ipsum dolor sit amet
</span>

.block {
  width: auto;
  height: auto;
  background-color: wheat;
}
.inline {
  width: auto;
  height: auto;
  background-color: yellowgreen;
}

width

height

最小、最大

min-width, min-height

<div id="container"></div>

#container {
  width: 50%;
  min-width: 300px; <!-- 창이 줄어들어도 최소 너비 300px 보장! -->
  height: 50%;
  min-height: 500px; <!-- 창이 줄어들어도 최소 높이 500px 보장! -->
  background-color: lightcoral;
}

max-width, max-height

margin

/* 네 면 모두 적용 */
margin: 1em;
/* 세로방향 | 가로방향 */
margin: 5% auto;
/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

margin collapsing

padding

/* 네 면 모두 적용 */
padding: 1em;
/* 세로방향 | 가로방향 */
padding: 5% auto;
/* 위 | 가로방향 | 아래 */
padding: 1em auto 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 2px 1em 0 auto;

border

border-style

/* 네 면 모두 적용 */
border-style: solid;
/* 세로방향 | 가로방향 */
border-style: dashed solid;
/* 위 | 가로방향 | 아래 */
border-style: dashed solid double;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
border-style: dashed solid none dotted;

border-width

border-color

border(shorthand)

border-radius

box-sizing