이 가이드와 두 가지를 구별하십시오.
패딩과 여백의 차이점을 모른다면 혼자가 아닙니다. 그것은 자주 묻는 질문이고 많은 웹 디자이너를 난처하게했습니다. 이 빠른 자습서로 두 가지를 구별하는 방법을 배우십시오.
차이점 이해하기
여백과 패딩 은 초보자 웹 디자이너와 때로는 더 많은 경험을 가진 디자이너에게 혼동을 줄 수 있습니다. 어쨌든 그들은 어떤면에서 볼 때 이미지 나 객체 주위의 공백 같은 것들처럼 보입니다.
패딩은 테두리와 실제 이미지 또는 셀 내용 사이의 경계 안의 공간입니다. 이미지에서 패딩은 내용 주위의 노란색 영역입니다. 패딩은 내용물 주위를 완전히 둘러 쌉니다. 위쪽, 아래쪽, 오른쪽 및 왼쪽면에 여백이 있습니다.
반면에 여백은 경계 밖의 경계, 경계와이 객체 옆의 다른 요소 사이의 공간입니다. 이미지에서 여백은 전체 개체 외부의 와이트 영역입니다. 패딩과 마찬가지로 여백은 내용을 완전히 둘러 쌉니다. 위쪽, 아래쪽, 오른쪽 및 왼쪽면에 여백이 있습니다.
유용한 팁
Internet Explorer와 같은 일부 브라우저에서 마진과 패딩을 사용하여 실제로 멋진 작업을 계획하고 있다면 상자 모델을 올바르게 구현하지 마십시오. 즉, 다른 브라우저에서는 페이지가 다르게 보일 수 있습니다 (때로는 크게 다를 수 있음).