패딩 (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의 여백을 가진다. 마진은 대상을 이동시키고 원하는 만큼의 간격을 설정하는 훌륭한 방법이다. 유사한 방법으로 구성요소 내부에 여백을 설정할 때 '패딩'을 사용할 수 있다

포지션을 이용한 레이아웃 때때로 우리는 플로트로 할 수 있는 것보다 더 정밀하게 레이아웃을 짜야 할 때가 있다. 이느 포지셔닝을 이용하면 가능하다. 말하자면 divB를 원래 위치를 기준으로 일정 거리로 이동시키려면 아래 CSS규칙을 추가하면 된다 position: relative; top: 50px; left: 100px; 위 코드는 divB를 아래로 50픽셀, 오른쪽으로 100픽셀 이동시킨다. 위 코드에 대한 결과값 아래로 50픽셀 오른쪽으로 100픽셀 이동시킨 그림이다 top과 left는 기준점이 된다. 그렇다면 top과 left를 음수 값(즉 -50px)으로 코딩을 수정하면 어떻게 될까? 반대쪽인 왼쪽과 위쪽으로 이동하게 된다. 즉 position; relative를 이용하면 원래 위치와 비교해서 ..