[HTML] 박스 모델, Block, line, 마진 병합 현상

Block & Inline

Block : Y축 정렬, 공간 생성 O, 상하 배치 O

Inline : X축 정렬, 공간 생성 X, 상하 배치 X

---

Box Model

 

브라우저에서 HTML 요소의 공간 배치 기본 레이아웃 구조(틀).

content(내용) > padding(패딩) > border(테두리) > margin(마진) 순으로 content를 감싸고 있다.

 

content 

글, 이미지, 비디오 등 요소의 실제 내용이 위치하는 영역, 즉 내용물.

width(너비)와 height 속성으로 크기가 결정됨. (w,h 속성을 갖는다.)

 

padding

테두리 안쪽의 내부 여백. 

요소에 적용된 배경의 컬러/이미지는 패딩 영역까지 적용된다. 

 

border

테두리. border의 값은 테두리의 두께를 말한다.

보이지 않아도 항상 존재하는 테두리.

 

magin

테두리 바깥의 외부 여백 영역. margin의 값은 외부 영역의 두께를 뜻한다. 

투명(transparent)하며, 배경색은 지정할 수 없다.

 

 

padding vs margin

패딩: 내부 여백 / border(테두리) 안쪽    /패딩을 손대면! 전체 공간이 여백을 포함한 크기로 변경된다.

마진: 외부 여백 / border(테두리) 바깥쪽 

.

 

padding and margin 작성 방법

> top right bottom left 순서로 한 줄로 작성 가능. (시계방향) 콤마 없음

패딩, 마진 모두 공백을 강제로 끼워 넣었기 때문에, 그만큼 옆으로 밀려난 것

---

Block and Inline

 

Block	Inline
공간이 만들어짐 = width /height 값 사용 가능 = margin 과 padding 값 사용 가능 = 상하 배치 작업 가능 출력효과: 줄바꿈 현상이 나타남(y축) 대표적: <div><p><h1~h6>	공간에 대한 크기를 만들 수 없음 = width /height 값 사용 X = margin 과 padding 값 사용 X = 상하 배치 작업 X * 좌우 배치 작업은 가능 (right/left) 출력효과: 줄바꿈 현상이 나타나지X (x축) 대표적:<a><span>....

 

---

마진 병합 현상

 

형제지간의 마진 병합 현상

 

형제끼리 두개의 영역이 위아래로 맞붙을 때....

.box1 {margin-bottom: 150px;}
.box2 {margin-top: 100px}

값이 서로 다르다면:: 큰 값이 작은값을 삼켜서 병합한다. (큰값이 우선순위!)

값이 서로 같다면 :: 동일한 값이 된다 (100+100=200 아님)

---

부모 자식간의 마진 병합

 

<main role="main">
 <article>
 </article>
</main>

/* css */
article{
width: 200px;
height: 200px;
margin-top: 100px;
}

자식인 <p> 뿐만 아니라 부모인 <main>까지도 영향을 미친다.

 

어떻게 극복?

position이라는 속성을, 자식 style 속성에 position: absolute를 써준다.