margin&padding / height

margin & padding

---

두 속성 모두 여백이 필요로 할 때 적용하는 속성.

border의 경계가 명확하게 표시되지 않으면 어떤 속성으로 필요한 여백을 표현할지 헷갈릴 수 있다.

margin과 padding의 비교

	+	-	auto	단위
margin	o	o	o	px, % ...
padding	o	x	x	px, % ...

margin은 사람과 사람사이의 거리. 사람들이 서로 겹쳐있으면 음수 값이 가능

padding은 뼈와 피부 사이의 지방. 음수값은 안돼

 

margin과 padding은 px(고정단위), %(상대적 단위) 사용가능

다만 %는 너비값을 기준으로 값이 결정된다.

 

 

width

---

요소의 가로 크기를 정의하는 데 사용하는 속성

width 속성은 인라인 레벨 요소를 제외한 모든 요소에 적용

기본값 : 0

< 속성 값 >

auto	브라우저에 의해 자동으로 계산하여 적용합니다. * 요소의 레벨 기본 특성에 따라 다르게 동작합니다.
length	고정값으로 지정합니다. (ex. px, em ....)
percent	부모 요소의 width에 상대적인 크기를 지정합니다.

width는 content 영역의 너비를 제어할 때 사용.

auto가 아닌 특정한 값 지정 사용시, 크기는 box model 영역에서 margin 영역 제외한 전 영역에 대해 영향을 받는다.

.box {
  width: 100px;
  padding: 20px;
  border: 10px solid black;
}

인 경우, 총 160px

contents(100px) + padding(20px*2) + border(10px*2) = 160px

 

%로 크기를 지정하면 부모의 content영역인 width크기만을 기준으로 계산한다. 즉,

부모의 width의 크기를 기준으로한 %값이 child의 content영역이다. 당연 child의 크기는 content + padding + border + margin 이다.

 

퀴즈

<div class="wrap">
	<div class="box">  
		<div class="inner">inner</div>
	</div>
</div>

.wrap { width: 500px; margin: 0 5px; padding: 10px; border: 15px solid red; }
.box { width: 60%; padding: 20px; border: 10px solid black; }
.inner { width: 30%; padding: 5px; background: pink; }

<!--inner의 전체 가로 길이는?-->

 

height

---

기본값 : 0

height는 content 영역의 높이를 제어할 때 사용

auto가 아닌 특정한 값을 지정하여 사용하면, width 속성과 마찬가지로 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받는다.

auto	브라우저 자동으로 계산하여 적용합니다. * 기본적으로 컨텐츠 영역의 내용만큼 높이를 가집니다.
length	고정값으로 지정합니다. (ex. px, em ....)
percent	부모 요소의 height에 상대적인 크기를 지정합니다. * 단, 부모 요소가 명시적으로 height 값이 있어야 합니다. 만약ㅇ, 부모가 명시적인 높이 값을 가지고 있지 않다면 %값은 적용되지 않고 auto일때의 값과 동일

부모태그가 명시적으로 height값을 적지 않은 경우

예를 들어 

 .parent { width: 300px; padding: 10px; border: 10px solid black; }
.child { height: 30%; padding: 15px; border: 5px solid black; }

라면 child의 전체 높이 값은 40px이다.