한쪽 요소에 영향을 미치는 한 요소의 여백

사이드 바 및 주요 섹션으로 구성된 간단하고 유동적이며 반응이 빠른 두 열 레이아웃 (CSS 학습을 위해서)을 만들려고합니다.한쪽 요소에 영향을 미치는 한 요소의 여백

100 % 높이의 사이드 바를 만들 수 있었고 메인 콘텐츠의 위치를 정할 수 있었지만 H1을 내 메인 섹션에 넣으면 ... 타다! 그 마진은 사이드 바에 대해서도 마진을 만들었다.

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     html,body { 
     margin:0; 
     padding:0; 
     width:100%; 
     height:100%; 
     } 

     #sidebar { 
     display:block; 
     position:absolute; 
     width:25%; 
     min-height:100%; 
     border-right:1px solid #222; 
     background-color: #E0E0E0; 
     } 

     #main { 
     margin-left:25%; 
     display:block; 
     } 

     h1 { 
     padding:2%; 
     /* margin:0; */ 
     /* defining the margin as zero aligns 
     * everything at the top */ 
     } 
    </style> 
    </head> 

    <body> 
    <header id="sidebar"> 
     Let's reach for the stars! 
    </header> 

    <section id="main"> 
     <h1>Nope!</h1> 
    </section> 

    </body> 
</html>

내가 크롬과 파이어 폭스에서 테스트 한이 두에서 일어난 :

는 여기에 문제를 제시하는 최소 코드입니다.

I've created this JSFiddle 및 cimmanon의 의견 덕분에 동작이 동일합니다.

글쎄, 나는 길을 잃었다. 나는 정말 간단한 것을 놓치고 있습니까?

이 방법은 2 열 레이아웃을 만드는 좋은 방법입니까? 나는 Svbtle blogs에서 CSS를 읽는 중 영감을 얻었다.

그렇지 않은 경우 올바른 방법으로 제게 적응하십시오. 좋은 CSS 프로그래밍이 필요합니다 :)

고마워요!

출처

2012-12-25 Castilho

JSFiddle은 기본적으로 부적절하게 "정상화"라고 표시된 재설정을 추가합니다. 정상화없이보십시오 : http://jsfiddle.net/PmkCQ/2/ – cimmanon

오, 그것을 몰랐다. 나의 예에서는 h1에 여백이 있고 jsFiddle이 "정규화"를 사용하여 h1에서 마진을 제거했다는 사실에 의존했습니다! – Castilho

일반적으로 문서의 흐름에서 요소를 제거하지 않으려면 절대 위치 지정을 피해야합니다. #main의 콘텐츠가 #sidebar보다 짧고 사용자의 디스플레이가 #sidebar의 콘텐츠를 모두 표시 할만큼 크지 않은 페이지가있는 경우 콘텐츠를 잘라 버릴 수 있습니다.

높이가 같은 열을 얻는 가장 좋은 방법은 display: table CSS 속성을 사용하는 것입니다.

http://jsfiddle.net/PmkCQ/3/

html,body { 
     margin:0; 
     padding:0; 
     width:100%; 
     height:100%; 
     } 

body { display: table } 

     #sidebar { 
     width:25%; 
     border-right:1px solid #222; 
     background-color: #E0E0E0; 
     } 

     #sidebar, #main { 
     display:table-cell; 
     vertical-align: top; /* optional */ 
     } 

     h1 { 
     padding:2%; 
     margin-top: 0; 
     /* margin:0; */ 
     /* defining the margin as zero aligns 
     * everything at the top */ 
     }

이 물론 다른 방법은,하지만이 한 수레 또는 절대 위치보다 취성

. 유일한 단점은 IE7이 이러한 속성을 지원하지 않기 때문에 이전에 정의 된 (또는 기본) 디스플레이 설정 ( div의 경우 block)을 계속 사용한다는 것입니다.

출처

2012-12-25 14:28:37 cimmanon

h1에 display: inline-block을 추가하면 사이드 바에 영향을 미치지 않습니다. 그런 다음 원하는 여백을 설정할 수 있습니다.

JSFiddle에서 문제가없는 것으로 보이는 이유는 아마도 스타일에 적용된 스타일 일 것입니다 (h1을 검사하면 margin:0이 표시됨).

출처

2012-12-25 14:16:27 Amit

고마워요.하지만 왜 처음에 영향을 미치는지 아십니까? 그것은 디스플레이와 함께조차 나를 이해하지 못합니다 : 블럭 (아니면 내가 CSS에서 디스플레이가 어떻게 작동하는지에 대한 오해가 있습니다) – Castilho

게다가, 더 나은 접근법은 디스플레이를 넣는 것입니다 : 섹션에서 인라인 블록이 아니라 h1, 맞지? – Castilho

한쪽 요소에 영향을 미치는 한 요소의 여백

답변

관련 문제