패딩 (adsbygoogle = window.adsbygoogle || []).push({});  (adsbygoogle = window.adsbygoogle || []).push({}); 파란색과 빨간색 div 모두 텍스트에 안쪽 여백이 없다. div의 경계와 텍스트 사이에 일정간격이 있으면 더 예쁘다. 이를 위해 '패딩'을 이용한다. 아래규칙을 divA에 적용해 보자.   padding : 10px;  이를 통해서 빨간색 사각형 안쪽에 10픽셀의 패딩이 생겨난다.                   (adsbygoogle = window.adsbygoogle || []).push({});

마진 마진은 선택적인 그리고 어떤 의미에서는 더 간단하게 구성요소의 위치를 설정하는 방법이다. 실습을 위해 divA 와 divB에서 모든 플로팅과 위치 설정규칙을 지우고 아래 코드를 divA에 추가한다. margin: 20px; 이 코드는 빨간색 div주변에 20픽셀의 여백을 만든다. 다음 그림과 같은 모습이다. 빨간박스는 위쪽, 왼쪽으로 각각 20px의 여백을 가진다. 마진은 대상을 이동시키고 원하는 만큼의 간격을 설정하는 훌륭한 방법이다. 유사한 방법으로 구성요소 내부에 여백을 설정할 때 '패딩'을 사용할 수 있다