웹 기초 - padding, margin

padding

• 내용(content)와 테두리(border)사이의 간격인 패딩 영역의 크기를 설정한다.
• 패딩 영역은 backgroun-color 속성으로 설정하는 배경색의 영향을 함께 받는다.
  

HTML

<div>
  <section>
    <img src="https://picsum.photos/id/11/600/600" alt="">
    <img src="https://picsum.photos/id/12/300/300" alt="">
    <img src="https://picsum.photos/id/13/300/300" alt="">
  </section>

  <section>
    <img src="https://picsum.photos/id/14/600/600" alt="">
    <img src="https://picsum.photos/id/15/300/300" alt="">
    <img src="https://picsum.photos/id/16/300/300" alt="">
  </section>

</div>


CSS

div > section > img {
  width: 300px;
  padding: 15px;
}

margin

• 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다.
• 마진 영역은 패딩 영역과 달리 background-color 속성으로 배경색의 영향을 받지 않는다.
• 요소 네 방향 바깥 여백 영역 설정

예시

/*네 면 모두 적용(상하좌우)*/
margin: 1em;
margin: -3px;

/* 세로방향 | 가로방향 */
margin: 5% auto;

/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

/* 전역 값 */
margin: inherit;
margin: initial;
margin: unset;

• auto : 브라우저가 적절한 여백 크기를 선택 ex) 중앙 정렬

HTML

<nav>

  <div>
    <img src="https://picsum.photos/id/11/600/600" alt="">
    <img src="https://picsum.photos/id/12/300/300" alt="">
    <img src="https://picsum.photos/id/13/300/300" alt="">
  </div>
  <div>
    <img src="https://picsum.photos/id/14/600/600" alt="">
    <img src="https://picsum.photos/id/15/300/300" alt="">
    <img src="https://picsum.photos/id/16/300/300" alt="">

  </div>
</nav>

CSS

nav > div {
  text-align: center;
}

nav > div > img {
  width: 300px;
  /* 테두리 바깥쪽 여백  */
  margin: 15px;
}