CSS_여백에도 두 가지가 있다.

블로그 살결을 다듬을 때 CSS 파일(style.css)을 열어 많은 걸 바꿀 수 있습니다. 초보자들은 건드리기 겁나지만 하나 둘 만지작거리다 보면 나름 재미를 느끼게 됩니다. 블로그 모양을 가다듬을 때 여백을 적당히 줘야 모양이 살아납니다. 여백에도 두 가지가 있는데 하나는 테두리(border) 바깥으로 다른 원소(div, span 따위)와 사이를 띄우는 것이고 다른 하나는 테두리 안쪽으로 여백을 주는 것입니다. 차례로 margin과 padding입니다. 공부하기.

.element_name { margin-top:20px; margin-bottom:20px; margin-left:20px; margin-right:20px;}

와 같이 상하좌우를 따로 쓰거나  한꺼번에 써도 됩니다. 다르게 주고 싶을 때는 아래와 같이 쓰는데 둘을 적으면 차례로 '상하'와 '좌우' 여백을 나타내고 넷을 쓰면 차례로 '상우하좌' 여백을 나타냅니다.

.element_name { margin:20px;} .element_name { margin:10px 20px;} .element_name { margin:20px 40px 20px 40px;}

같은 방법으로 padding을 쓸 수 있습니다. 참고로 이 글에 쓰는 박스는 아래와 같이 정해주었습니다.

.box_01 { padding : 20px;
background : #efe;
border-top : 2px solid #32cd32;
border-right : 1px solid #ddd;
border-left : 1px solid #ddd;
border-bottom : 1px solid #ddd;
margin : 5px;
color : #339; }