두 블록 요소 사이에 공백이 없어야합니다.

내 페이지는 3 열 레이아웃을 가지며 왼쪽 및 오른쪽 열이 절대적으로 배치되고 가운데 열은 상대 위치 지정을 사용합니다. 세 개의 열은 모두 페이지 상단에서 184 픽셀 거리만큼 이동해야하지만 어떤 이유로 인해 페이지 상단과 가운데 열 사이의 거리가 184 픽셀보다 커야합니다. 필자는 가운데 열이 문서의 정상적인 흐름에 있음을 알고 있지만 패딩과 여백 모두가 0으로 설정되어 있으므로 머리글과 가운데 열이 만져야합니다. 무슨 일있어?두 블록 요소 사이에 공백이 없어야합니다.

body 
{ 
    padding:0px; 
    margin:0px; 
} 

#header 
{ 
    padding:0px; 
    margin:0px; 
    background-image:url(images/HeaderSlice.gif); 
    background-repeat:repeat-x; 
    height:184px; 
} 

#centerCol 
{ 
    position:relative; 
    margin-left:200px; 
    margin-right:200px; 
} 


#leftCol 
{ 
    position:absolute; 
    top:184px; 
    left:0px; 
    width:200px; 
} 

#rightCol 
{ 
    position:absolute; 
    top:184px; 
    right:0px; 
    width:200px; 
}

HTML 파일 :

... 
<body> 
    <div id="header">...</div> 
    <div id="centerCol">...</div> 
    ...

고맙습니다

편집 :

이제 작동합니다. #centerCol 내부 나는 (ID = "userManagement"과) 다른 사업부를 했어 그것이 #userManagement 내부의 위쪽 여백을 보니 #centerCol

<div id="centerCol"> 
    <div id="userManagement">...</div> 
</div> 

#userManagement 
{ 
    margin-top:16px; 
    margin-left:10px; 
    font-size:12px; 
}

의 위쪽 여백과 중복 도와 주셔서 감사합니다.

출처

2010-01-29 carewithl

유효한 doctype을 사용하고 있습니까? – Sampson

을 수행합니다. #header에는 오버플로가 발생하여 높이 이상으로 확장되는 콘텐츠가있을 수 있습니다. #header 요소에 'overflow : hidden'을 추가해보세요. b. centerCol에 margin-top과 padding-top이 0으로 설정되어 있다고 확신합니까? 스 니펫에는이 내용이 표시되지 않습니다.

c. FireBug가있는 Firefox에서 페이지를 열고 방화 광구 창에서 위치 데이터를 확인하십시오. 그것은 위치 문제에 대한 큰 통찰력을 제공합니다.

출처

2010-01-29 20:38:18

을보고 jpalbuz가 지적했듯이 HTML과 본문에 여백과 패딩이 0으로 설정되어 있는지 확인하십시오. YUI의 리셋 CSS 기술을 살펴보십시오. 브라우저 간 기본 동작을 가져 오는 데 목적이 있습니다. –

안녕하세요, 저는 어리석은 실수를했습니다.하지만 이제는 작동합니다. 내 수정 게시물 – carewithl

게시물을 참조하십시오. 내가 도울 수있어서 기뻐. 그것에 대해 아무 것도 바보가 아닙니다. 우리 모두는 항상이 실수를합니다. CSS는 지속적인 학습 과정입니다. :) –

html 클래스 태그를 사용하면 페이지 상단에 추가 된 패딩을 제거 할 수 있습니다. 크롬이이 동작을 표시하지 않기 때문에 특정 브라우저 (Firefox?)가 원인입니다.

이 될 것이라고 :

html, body 
{ 
     margin:0; 
     padding:0; 
}

출처

2010-01-29 20:37:32 jpabluz

안녕하세요, 저는 어리석은 실수를했습니다.하지만 지금은 효과가 있습니다. 내 편집 된 게시물 – carewithl

두 블록 요소 사이에 공백이 없어야합니다.

답변

관련 문제