margin, padding

• 기본 개념

width = content width + L/R padding + L/R border + L/R margin

margin : 특정 영역(box)의 바깥쪽 여백을 의미
padding : 특정 영역(box)의 안쪽 여백을 의미


cellspacing : 바깥쪽 여백
cellpadding : 안쪽 여백

background -color은 padding 영역을 포함한 border안쪽 공간을 채운다.

• padding, margin 지정법

1. margin : 0 10px 10px 20px;   => top, right, bottom, left
2. margin-bottom : 20px;
3. padding : 10px;
4. margin : 2px 5px;  =>top,bottom은 2px, left,right는 5px

• margin 병합

위 아래 엘리먼트의 margin이 겹칠 경우 두 margin중 큰 것을 따른다.
해결책 : margin이 겹치지 않도록 padding이나 border값을 준다.

• 인라인 태그 vs 블록 계층 태그

1. 블록 계층 태그 : <P> <DIV> <TABLE>

        글꼴, 색상, 배경, 테두리, padding, margin

1. 인라인 태그 : <strong> <span> ,<img> <a>

        글꼴, 색상, 배경, 테두리,  padding(좌,우), margin(좌,우)
        img태그는 padding, margin 상,하 사용 가능

1. 유형변경

       display : inline;  
       display : block;