여백 상단 푸시 외부 div

래퍼 div의 첫 번째 요소로 헤더 div가 있지만 헤더 div 내부의 h1에 위쪽 여백을 추가하면 전체 헤더 div가 아래로 푸시됩니다. 페이지의 첫 번째 보이는 요소에 위쪽 여백을 적용 할 때마다이 문제가 발생한다는 것을 알고 있습니다.

다음은 샘플 코드 스 니펫입니다. 감사!

div#header{
	width: 100%;
	background-color: #eee;
	position: relative;
}

div#header h1{
	text-align: center;
	width: 375px;
	height: 50px;
	margin: 50px auto;
	font-size: 220%;
	background: url('../../images/name_logo.png') no-repeat;
}

<div id="header">
	<h1>Title</h1>
	<ul id="navbar"></ul>
</div>

넣어 overflow:auto상위에 div
링크에서 더 많은 참조

왜 이런 일이 발생하는지에 대한 확실한 설명은 없지만 top-marginto 를 변경 top-padding하거나 display: inline-block요소 스타일에 추가 하여이 문제를 해결했습니다 .

편집 : 이것은 내 이론이다

나는 여백이 무너지는 방법과 관련이 있다고 생각합니다.

에서 W3C 붕괴 여백 :

본 명세서에서, 축소 마진이라는 표현은 두 개 이상의 상자 (서로 옆에 있거나 중첩 될 수 있음)의 인접한 여백 (빈이 아닌 내용, 패딩 또는 경계 영역 또는 간격이 분리되지 않음)이 결합되어 단일 여백을 형성 함을 의미합니다. .

내 이론은 첫 번째 요소가 본문 옆에 있기 때문에 두 개의 여백이 결합되어 본문에 적용된다는 것입니다. 이렇게하면 본문의 내용이 상자 모델 에 따라 적용된 축소 된 여백 아래에서 시작됩니다. .

마진이 무너지지 않는 상황이 있습니다 ( Clapsping Margins에서 ).

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
* the root element

이것은 부모-자식 요소 사이의 여백 붕괴를 피하는 방법 중 일부입니다. 나머지 스타일링에 더 적합한 것을 사용하십시오.

• display이외로 설정하십시오 block.
• float이외로 설정하십시오 none.
• 여백을 제거하고 대신을 사용하십시오 padding. 예를 들어있는 경우로 margin-top: 10px교체하십시오 padding-top: 10px;.
• 여백을 제거하고 대신 사용 position( absolute또는 relative속성을) top, bottom당신이 가지고있는 경우 등 예를 들어 margin-top: 10px, 교체 position: relative; top: 10px;.
• 여백이 접히는면에 a padding또는 a border를 부모 요소에 추가합니다. 테두리는 1 픽셀이고 투명 할 수 있습니다.
• 설정 overflow이외 visible받는 부모 요소입니다.

나는 이것이 오래된 문제라는 것을 알고 있습니다. 나는 여러 번 그것을 보았습니다. 문제는 여기에있는 모든 수정 프로그램이 의도하지 않은 결과를 초래할 수있는 해킹이라는 것입니다.

먼저 근본 문제에 대한 쉬운 설명이 있습니다. 여백 축소가 작동하는 방식으로 인해 컨테이너 내부의 첫 번째 요소에 상단 여백이 있으면 해당 상단 여백이 상위 컨테이너 자체에 효과적으로 적용됩니다. 다음을 수행하여 직접 테스트 할 수 있습니다.

<div>
    <h1>Test</h1>
</div>

디버거에서이를 열고 div를 가리 킵니다. div 자체가 실제로 H1 요소의 상단 여백이 중지 되는 곳에 배치되어 있음을 알 수 있습니다. 이 동작은 브라우저에서 의도 한 것입니다.

그래서 여기의 대부분의 게시물 (모욕이 없으며 의도 만 진실) 이하는 것처럼 이상한 해킹에 의지하지 않고이 문제를 쉽게 해결할 수 있습니다-단순히 원래의 설명으로 돌아가십시오-- ...if the first element inside a container has a top margin...그에 따라 컨테이너의 첫 번째 요소는 NOT 최고 마진을 가지고있다. 좋아, 그러나 문서 적으로 의미를 방해하지 않는 요소를 추가하지 않고 어떻게합니까?

쉬운! 의사 요소! 클래스 또는 미리 정의 된 믹스 인을 통해이 작업을 수행 할 수 있습니다. :before의사 요소를 추가하십시오 .

클래스를 통한 CSS :

.top-margin-fix:before {   
    content: ' ';
    display: block;
    width: 100%;
    height: .0000001em;
}

이를 통해 위의 마크 업 예제에 따라 div를 다음과 같이 수정합니다.

<div class="top-margin-fix">
    <h1>Test</h1>
</div>

왜 이것이 작동합니까?

컨테이너의 첫 번째 요소 (상단 여백이없는 경우)는 다음 요소의 상단 여백 시작 위치를 설정합니다. :before의사 요소 를 추가 하면 브라우저는 실제로 의미가없는 (즉, SEO에 적합) 요소를 상위 컨테이너에 추가합니다. 첫 번째 요소 전에 에 추가 합니다.

Q. 왜 높이 : .0000001em?

A. 브라우저가 여백 요소를 아래로 밀려면 높이가 필요합니다. 이 높이는 사실상 0이지만 부모 컨테이너 자체에 패딩을 추가 할 수 있습니다. 사실상 0이므로 컨테이너의 레이아웃에도 영향을 미치지 않습니다. 아름다운.

이제 요소를 사용하여 다른 일을 할 때 예기치 않은 결과를 초래하는 이상한 디스플레이 스타일을 추가하는 대신이 문제를 해결하기 위해 클래스 (또는 SASS / LESS에서는 mixin!)를 추가 할 수 있습니다. 패딩 또는이 문제를 해결하기위한 의도가 아닌 이상한 위치 / 부동 스타일로 바꾸십시오.

display: flex이 경우 작동합니다. 부모 요소 display: flex;를 제공 한 다음 요구 사항에 따라 여백을 h1태그에 제공하십시오.

오늘이 문제에 부딪 치십시오.

overflow: hidden 더 많은 요소를 따랐을 때 예상대로 작동하지 않았습니다.

그래서 부모 div의 display 속성을 변경하려고 시도 display: flex했습니다.

이것이 누군가를 도울 수 있기를 바랍니다. :)

부모 요소 상단에 작은 패딩을 추가하면이 문제를 해결할 수 있습니다.

.parent{
  padding-top: 0.01em;
}

이는 중첩 효과를 만드는 것처럼 부모 내부의 요소를 부모 요소 외부에 표시해야하는 경우에 유용합니다.

이것은 마진 붕괴로 인해 발생합니다. 자식 요소가 부모 요소의 경계에 닿으면 여백이 적용됩니다.

1. 가장 큰 마진이 적용됩니다 (적용됨).

2. 그들 중 하나라도 마진을 가지고 있다면 둘 다 동일하게 공유 할 것입니다.

솔루션

1. 부모와 자식을 구분하는 테두리를 부모에 적용하십시오.
2. 부모와 자식을 구분하는 패딩을 부모에 적용하십시오.
3. 부모에게 보이지 않고 오버플로를 적용하십시오.
4. 마진 적용 자식과 부모가 다를 수있는 부모 div에서 가상 요소를 만들기 위해 전후에 사용하십시오.
5. 마진이 적용된 자식과 부모 사이에 하나의 html 요소를 만들면 구분할 수 있습니다.