내부 DIV에서 margin-top 설정이 안되는 문제 해결

(1)

최근에 다른 웹사이트에서 작업할 때 이 문제가 다시 발생하여 주의 깊게 연구하고 해결하기로 결정했습니다.

코드는 다음과 같습니다:

상위 레이어

                          

margin-top : 200px; "> 하위 레이어 ff에 문제가 있습니다. 하위 레이어와 상위 레이어는 웰트되어 있지만 상위 레이어와 200px만큼 분리되어 있습니다.

당황스러워서 Google을 검색해 보니 다음과 같은 문장이 나왔습니다.

두 개의 컨테이너가 중첩되어 있을 때 외부 컨테이너와 내부 컨테이너 사이에 다른 요소가 없으면 Firefox는 내부 요소의 여백을 제거합니다. . -top은 상위 요소에 작용합니다.

즉, 하위 레이어는 상위 레이어의 비어 있지 않은 첫 번째 하위 요소이기 때문에 margin-top을 사용할 때 이 오류가 발생합니다.

두 가지 해결 방법이 있습니다.

1 플로팅을 사용하여 문제를 해결합니다. 즉, 하위 레이어 코드를 다음과 같이 변경합니다.

Sub- layer

2. 문제를 해결하려면

padding-top

을 사용하세요. 즉,

Sub-layer< /p>

(2)

이런 문제가 자주 발생합니다. 즉, 외부 레이어 p의 높이와 너비를 설정한 경우, 내부 레이어 p를 마링으로 설정한 경우 -top, 작동하지 않습니다(FIREFOX 및 IE8에서 테스트). 이유는 대략적으로 레이아웃을 얻지 못하는 내부 레이어 p입니다. 예를 들어 다음 코드는

테스트 결과 bp의 margin-top이 작동하지 않습니다. 디스플레이 효과는 여전히 0px입니다. Firebug를 사용하여 Firefox에서 보면 margin-top 값이 10px인 것을 볼 수 있습니다. 문제에 대한 해결책은 다음과 같습니다.

1 margin-top을 padding-top으로 변경하지만 전제는 다음과 같습니다. 내부 레이어의 p가 Border
2로 설정되지 않았다는 것입니다. 외부 p

3에 padding-top을 추가합니다.

A, float: 왼쪽 또는 오른쪽

B, 위치: 절대

C, 디스플레이: 인라인 블록 또는 테이블 셀 또는 기타 테이블 유형

D,

overflow

: 숨김 또는 자동

예를 들어 위 코드를 다음과 같이 변경할 수 있습니다.

.a {배경: 빨간색; 너비: 300px; 부동:왼쪽; }

.b {배경:녹색; 너비:100px;}

c {배경:검정색; 위치:상대적; 너비:100px; 높이:20px ;}

.clear{clear:both;}

< p class="b">

참고: 끝에
clear float

을 추가하세요.

위 내용은 내부 DIV에서 margin-top 설정이 안되는 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!