HTML/CSS box model

1. 박스모델

2. 마진 병합현상

1. 형제지간 마진 병합

<style>
    .box1{
        margin-bottom: 150px;
    }
    .box2{
        margin-bottom: 100px;
    }
</style>


<div class="box1">Hello World</div>
<div class="box2">Hello World</div>

• 이렇게 양쪽 속성에 margin값이 겹칠 땐 더 큰 값으로 적용됨.

2. 부모 자식지간 마진 병합

<style>
	article{
    	width: 200px;
    	height: 200px;
    	margin-top: 100px;
	}
</style>

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

• 이렇게 자식도 자식만의 마진을 갖고 있다면 부모도 같이 마진값을 갖고 또 내려가버림 결과적으로 2배로 내려가버림

3. 레이아웃에 영향을 미치는 속성

1) display

• display란? : block 요소와 inline 요소의 성격을 바꿀 때 사용 하지만 inline-block 을 사용하면 2가지 속성 모두를 갖게 됨

2) float

• 한마디로 정렬을 하고싶을 때 사용
• 또한 전체 레이아웃을 구성할 때 사용

3) clear

• 배운대로 float의 속성을 제어하고자 할 때

4) 브라우저와 공간사이의 공백제거하기

• HTML과 BODY 태그는 passive로 마진과 패딩값을 갖고있으므로 초기화를 해주어야함.

* {
margin : 0;
padding : 0;
}

• 이런식으로 아스타리카나 html 태그를 선택하여 초기화를 진행해줌.
• 이 코드를 default로 그냥 passive로 넣어주어야함.