[CSS] margin & padding

body에는 기본적으로 margin이 들어간다

초기 세팅할때 margin: 0;을 주고 들어가면 css 적용이 수월하다

시계 방향으로 값을 준다

 

body {
	margin: 0;
}

h1 {
	border: solid 1px black;
	/* 시계방향 */
	/*
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 40px;
	*/
	padding: 10px 20px 30px 40px;
	
	/* top은 10px, right, left는 20px, bottom은 30px */
	padding: 10px 20px 30px;
	
	/* top, bottom은 10px, right, left는 20px */
	padding: 10px 20px;
}

 

 

📌개발자 도구 창에서 css를 하나씩 지워나가면서 정리하는 작업도 필요하다(필요없는 css 삭제)

 

---

 

margin 겹침 현상

요소와 요소 사이 margin-top, margin-bottom의 공간이 있을 경우, 더 높은 margin값 적용

부모 요소와 자식 요소가 존재할때, 자식 요소의 margin-top 혹은 margin-bottom 값이 부모의 높이에 영향을 미침

 

해결 방법

부모 요소에 overflow, display:inline-block, border 적용