margin-top이 상위 요소에 작동하지 않는 이유-CSS 튜토리얼-php.cn

margin-top이 상위 요소에 작동하지 않는 이유

巴扎黑

풀어 주다： 2017-06-28 13:44:04

원래의

1698명이 탐색했습니다.

margin-top이 상위 요소에 작동하지 않는 이유:
권장: 코드를 최대한 손으로 작성하면 학습 효율성과 깊이가 효과적으로 향상됩니다.
margin-top 속성의 기본 사용법은 간단합니다. 즉, 개체의 상단 margin을 설정하는 것입니다. 다음 코드 예제를 참조하세요.

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>为什么margin-top不是作用于父元素</title><style type="text/css"> * 
{ 
  margin:0px; 
  padding:0px; 
} p 
{ 
  width:100px; 
  height:100px; 
  background-color:green; 
  margin-top:50px; 
} 
</style> 
</head> 
<body> 
  <p></p> 
</body> 
</html>

로그인 후 복사

위 코드는 다음과 같습니다. p의 상단 여백을 50px로 설정하면 문제 없이 잘 실행됩니다. 다음 코드를 살펴보겠습니다.

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> #parent 
{ 
  width:200px; 
  height:200px; 
  background-color:red; 
} #children 
{ 
  width:60px; 
  height:60px; 
  background-color:green; 
  margin:0px auto; 
  margin-top:50px; 
} 
</style> 
</head> 
<body> 
<p id="parent"> 
  <p id="children"></p> 
</p> 
</body> 
</html>

로그인 후 복사

위 코드의 원래 의도는 자식 요소의 상단이 부모 요소에서 50px 떨어져 있지만 실제로는 그렇지 않습니다. 기대한 효과는 얻지 못하지만, 자식 요소의 상단이 부모 요소에 가깝고, margin-top이 부모 요소로 옮겨진 것 같습니다. 상위 요소는 상위 요소가 상단 여백을 생성할 수 있도록 합니다. 이는 실제로 일반적인 마진 병합 문제이지만 모든 브라우저에서 이러한 현상이 발생하는 것은 아닙니다. 일반적으로 표준 브라우저에서는 이러한 현상이 발생하며 IE6 및 IE7에서는 이 상태에서 마진 병합이 발생하지 않습니다. 위쪽 여백 병합이 발생하는 조건:
1. 상위 요소의 위쪽 여백과 하위 요소의 위쪽 여백 사이에 경계가 없습니다.
2.상위 요소의 상단 여백과 하위 요소의 상단 여백 사이에 비어 있지 않은 콘텐츠가 없습니다.
3.상위 요소의 상단 여백과 하위 요소의 상단 여백 사이에는 패딩이 없습니다.
3. 상위 요소와 하위 요소에는 위치 지정 속성(정적 및 상대 제외), overflow(표시 제외) 및 display:inline-block이 설정되어 있지 않습니다.
4. 상위 요소나 리소스가 떠있지 않습니다.
참고: 위의 조건이 충족되어야 합니다. 그렇다면 이 상황을 해결하는 방법도 매우 간단합니다. 위의 상황 중 하나를 파괴하면 됩니다.
마진 병합에 대한 자세한 내용은 마진 마진 병합 세부 설명 장을 참조하세요.

위 내용은 margin-top이 상위 요소에 작동하지 않는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!