CSS margin-top 사용 시 자주 발생하는 문제 요약-CSS 튜토리얼-php.cn

CSS margin-top 사용 시 자주 발생하는 문제 요약

伊谢尔伦

풀어 주다： 2017-06-01 13:10:09

원래의

2737명이 탐색했습니다.

CSS 스타일에서 margin-top 속성은 요소의 상단 여백을 설정합니다. 음수 값을 허용할 수 있습니다. 고정 상단 여백을 정의하는 기본값은 0입니다. 모든 주요 브라우저는 margin-top 속성을 지원합니다. 이 글을 통해 프런트 엔드 페이지에서 margin-top 속성을 사용할 때 자주 발생하는 몇 가지 문제에 대해 구체적으로 설명하겠습니다. 설정이 상위 요소에 영향을 미치는 경우 어떻게 해야 합니까? margin-top 속성이 작동하지 않으면 어떻게 해야 합니까? 등.

1. margin-top 설정이 상위 요소에 영향을 미치는 경우 어떻게 해야 하나요?

1. 자식 요소의 여백 상단에서 상위 요소에 영향을 미치는 여백 접기 문제를 해결하는 방법

CSS margin-top 사용 시 자주 발생하는 문제 요약

원리: 여백 축소(여백 축소)

두 개의 인접 또는 다중 여백(여백)이 세로 방향으로 하나의 여백으로 결합됩니다. 여기서 인접이란 상하 padding-top, padding-bottom, border-top, border-bottom이 없고 요소 내용이 비어 있지 않다는 뜻입니다.

가장 일반적인 여백 접기는

요소가 병치되는 경우입니다. 각 p는 위와 아래에 1em의 여백을 갖지만 인접한 p는 2em이 아닌 1em의 간격만 표시합니다.

2. CSS 하위 요소의 margin-top이 상위 요소에 영향을 미치는 이유는 무엇입니까? 2) margin 대신 패딩을 사용하세요3.
하위 요소에 margin-top을 추가하면 상위 요소에 문제가 발생합니다

하위 요소의 margin-top은 하위 요소를 상위 요소와 분리하지 않습니다. 반대로 효과는 상위 요소에 margin-top을 추가하는 것과 동일합니다. 솔루션, 구체적으로:

1) 상위 요소의 높이를 수정하고 패딩 탑 스타일 시뮬레이션을 추가합니다(padding-top:1px;)

2) 상위 요소에 Overflow:hidden; 추가 3) 부동(float) :left; 사용 가능하지만 권장되지 않음) 상위 요소 또는 하위 요소 life 요소에 대해
4) 상위 요소에 테두리 추가(테두리: 1px 솔리드 투명)

5) 상위 요소 또는 하위 요소에 대한 절대 위치 선언 6) 상위 요소 #father:before{content:' ';display:table};

에 콘텐츠 생성 추가 2. 여백 사용 -top 속성이 작동하지 않으면 어떻게 해야 합니까?

firefox Margin-top 오류 원인 및 해결 방법

플로팅 블록 수준 요소의 margin-bottom은 항상 플로팅 블록 수준 형제 요소와 동일합니다. 해당 형제 요소가 지우기 작업을 사용하지 않는 한 그 뒤에 (플로팅된 다음 유입 블록 수준 형제) 여백 상단에 인접해 있습니다. 부동 블록 수준 요소의 여백 상단은 첫 번째 부동 블록 수준 하위 요소(부동 첫 번째 유입 블록 수준 하위 요소)의 여백 상단에 인접합니다(요소에 테두리 상단이 없고 패딩이 없는 경우). - 상단 및 하위 요소는 지워지지 않습니다.)

2. margin-top 오류, CSS + div 레이아웃의 CSS 상자 모델 여백 병합 문제

일반 문서 흐름에서는 2개 이상의 블록 수준 상자 모델의 인접한 세로 여백이 접혀집니다. 최종 마진 값 계산 방법은 다음과 같습니다. CSS margin-top 사용 시 자주 발생하는 문제 요약 a. 모두 양수 값인 경우 가장 큰 값을 취합니다. b. 모두 양수 값이 아닌 경우 절대값을 취한 다음 양수 값에서 최대값을 뺍니다. c. 양의 값이 없으면 절대값을 취하고 0에서 최대값을 뺍니다.