html/css 개발을 하다가 당황스러운 일을 겪어서 기록으로 남겨둔다.
중첩된 div 태그 구조에서,
자식 div에 margin-top을 주었는데,
부모 div에 margin-top이 적용되어버리는 사태가 발생한 것이다.
(자식이 block 속성이면 발생하는듯 하다.)
즉, 아래 코드를 실행하면,
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#parent{
width: 300px; height: 300px;
background: green;
}
#child{
width: 50px; height: 50px;
background: yellow;
margin: 130px auto
}
</style>
</head>
<body>
<div id="parent">
<div id="child">자식</div>
</div>
</body>
</html>아래와 같은 결과물이 나온다.
원래 기대했던 결과물은 이것이었을텐데 말이다.
상식적인 상황은 아니지만,
마진병합/마진상쇄(margin-collapse)현상의 일종이라고 한다.
"부모 블록에 테두리, 패딩 등이 없고 별도의 min-height, max-height 등이 설정되지 않은 경우, 자식의 margin-top은 부모의 margin-top으로 적용된다."
해석이 맞나... 자세한 내용은 mozzila 사이트 참고
# 자식의 margin-top이 부모에게 적용되는 현상 해결 방법
아래의 3가지 방법 중 하나를 택해서 사용하면 된다.
1. 부모 태그의 overflow 속성에 hidden이나 auto 설정
overflow: hidden | auto;
2. 부모 태그의 padding-top에 1px, margin-top에 -1px 설정
padding-top: 1px; margin-top: -1px;
3. 부모 태그에 border 주기
border: 1px solid 색상
즉, 아래와 같이 설정해주면 원하는 결과를 만들 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#parent{
width: 300px; height: 300px;
border: 1px solid green; /* 부모에게 테두리를 주었다. */
background: green;
}
#child{
width: 50px; height: 50px;
background: yellow;
margin: 130px auto
}
</style>
</head>
<body>
<div id="parent">
<div id="child">자식</div>
</div>
</body>
</html><결과물>
더욱 상세한 내용은
margin-top moves parent element 등으로 검색해보면 좋을듯 하다.
'개발(Development) > HTML, CSS' 카테고리의 다른 글
| [HTML] input:number 의 숫자 최대값, 최소값 설정 방법 (0) | 2021.07.07 |
|---|---|
| [HTML] img 태그: 샘플 더미 이미지 사이즈별 적용 방법 (0) | 2021.07.07 |
| HTML Canvas 왜곡현상(선 두께 불일치, 비대칭, 비율 불균형 등) 해결 방법 (0) | 2021.03.28 |
| [HTML] number타입 INPUT입력창에 소수점 입력 허용 방법(step속성 활용) (0) | 2021.01.22 |
| [CSS] 아이폰(iOS) input, button 기본 테두리, 색(그라데이션) 스타일 제거 방법 (0) | 2021.01.21 |
댓글