결과물

주요 코드

<div class="img1"><img src="4-1.jfif"></div>
<div class="img2"><img src="4-2.jfif"></div>

//CSS
.img1{
  display:inline-block;
  padding: 20px;
  margin: 20px;
  background-color:red;
}
.img2{
  display:inline-block;
  padding:20px;
  margin:20px;
  background-color:blue;
}

:패딩과 마진 둘다 여백을 표현할 수 있는 속성이다.
패딩은 박스 테두리와 안쪽 콘테츠 사이의 여백(위사진에서 배경색이 칠해진 부분),
마진은 박스 테두리 바깥의 여백을 의미한다.(위 사진 2개 사이)
예를 들어 버튼을 만든다고 가정하면 버튼을 클릭할 수있도록 설정할 때, 마진이 아닌 패딩까지만 버튼으로 인식한다.
즉 패딩은 클릭할 수 있는 영역이 늘어나는 효과를 볼 수 있다.

<span id="em">2em </span> <span id="px">32px </span><span id="rem">2rem </span>

//css
p{
  font-size:16px;
}
#em{
  font-size:2em;
}

#px{
  font-size:32px;
}
#rem{
  font-size: 2rem;
}

:위 코드의 상위 요소는 <p>인데 <p>의 font-size:16px 이므로 2em은 36px이다. 마찬가지로 최상위요소의 font-size또한 16px이므로 2rem은 36px이다.