[css] 박스 모델

 

 

 

 

 

모든 콘텐츠는 고유한 영역이 있다.

하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다.

 

 

코드로 확인해보기

 

 

index.html

 

<h1>Basic document flow</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not</p>

 

 

index.css

 

 

h1 {
  background: gray;
  width: 60%;
}

p {
  background: rgba(255,84,104,0.3);
  width: 80%;
  height: 200px;
}

span {
  background: yellow;
  width: 100px;
  height: 100px;
}

 

 

이하 생략

이하 생략 ...

 

줄 바꿈이 되는 박스(block) : <div>,<p>

옆으로 붙는 박스(크기 지정 x)(inline, inline-block) : <span>

 

줄바꿈이 되는 요소 : <h1>,<p>

줄 바꿈이 되지 않는 요소 : <span>

→ 실제로 span 요소는 width, height 속성이 적용 x

 

 

정리

 

 

 

 

block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능