CSS - 부모와 자식요소 관계

• 위스타그램 과제 진행 중

---

height: auto & width: auto

• height: auto는 자식 요소 크기를 기준으로 설정하지만, width: auto의 경우에는 부모 요소 크기를 기준으로 설정한다.

/* css */
.main {
    height: auto;
}
div.feeds {
    width: 300px;
    height: 500px;
    color: black; 
    border: 1px solid black;
    margin-left: 30px;
}

<!-- html -->
<main class="main">
	<div class="feeds">

➡️ 자식 요소 div.feeds의 height가 500px로 고정되어 있기 때문에 .main의 height: auto로 설정하면 자식 요소의 크기를 기준으로 동일하게 500px가 적용된다.

---

자식의 margin-top이 부모 태그에 적용되는 현상 해결 방법

자식 div인 div.feeds에 margin-top을 적용시켰는데 부모 태그인 .main에 동일한 margin-top이 적용되는 경우

• 자식요소 height: 500 (파란색 부분)
  

• 부모요소 height: 500 (파란색 부분)
  

부모 태그에 테두리, 패딩 등이 없고 별도의 min-height, max-height 등이 설정되지 않은 경우, 자식의 margin-top은 부모의 margin-top으로 적용된다.
이를 마진병합/마진상쇄(margin-collapse)현상의 일종 이라고 한다.

💡 1. 부모 태그의 overflow 속성에 hidden이나 auto 설정
overflow: fidden | auto;

💡 2. 부모 태그의 padding-top에 1px, margin-top에 1px 설정
padding-top: 1px; margin-top: -1px;

💡 3. 부모 태그에 border 주기
border: 1px solid 색상