Box Model

Margin, Padding

<style>
  div {
  	margin-left: 100px;
  	padding-left: 100px;
  }
</style>

• margin-left (right, top, bottom)
  border 바깥쪽에서 왼쪽에 여백을 만듦
  
  
• padding-left (right, top, bottom)
  border 안쪽에서 왼쪽에 여백을 만듦
  공간이 여백을 포함한 크기로 변경되는 점 유의

<style>
  div { margin: 100px 0 0 100px; }
</style>

• top right bottom left 순서로 한 줄에 작성 가능

Margin 병합

형제간의 마진 병합

<div class="box1">Hello World</div>
<div class="box1">Hello World</div>
// css //
.box1 { margin-bottom:150px; }
.box2 { margin-top:100px; }

margin-bottom과 margin-top 중 숫자가 큰 값으로 적용

부모 자식간의 마진 병합

<main role="main">
  <article>
  </article>
</main>
// css //
article {
	width: 200px;
    height: 200px;
    margin-top: 100px;
    }

자식인 <article> 뿐만 아니라 부모인 <Main> 에도 영향을 미침

Block, Inine

Block

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

• <p> 태그가 대표적
• 줄바꿈 나타남
• width / height 값 사용 가능 > 공간 만들기 가능
• margin / padding 값 사용 가능 > 상하 배치 작업 가능

Inline

• <a>, <span> 태그가 대표적
• width / height 값 적용 불가
• margin-top, bottom / padding-top, bottom 값 적용 불가