margin, border ,padding 차이점 // css 상단 여백 지우는 방법

margin

margin 은 box의 border(경계)의 바깥에 있는 공간

 

body의 경계로 부터 바깥에 있는 공간 

 

---

 

입력하는 방법이 있는데

 

#id{

margin : 10px   == 모든 네 면의 여백을 10px으로 설정하는 것

margin : 10px 20px == 위와 아래는 10px 왼쪽 오른쪽은 20px로 설정하는 것

margin : 10px 20px 30px == 위는 10px 왼쪽 오른쪽은 20px 아래는 30px로 설정하는 것

margin : 10px 20px 30px 40px == 위 10px 오른쪽 20px 아래 30px 왼쪽 40px로 설정하는 것 (시계방향)

}

margin 말고도 border, padding 입력하는 방법은 같다

---

border

box의 경계 ,  스타일을 변경할 수 있음

padding

 

padding은 box의 경계의 안쪽에 있는 공간 

 

 

이번에 알아본 이유는 상단에 거슬리게 딱 안붙길래 알아보았더니 body에 브라우저가 자동으로 margin 값을 8px씩 주어서 이런 현상이 나오는 것이었다

 

 

 

 

body{

margin:0px 

}

으로 바꾸면 문제가 해결할 수 있습니다