2011-08-18 7 views
0

누군가 내 미안하고 바보 같은 눈이 없다고 말할 수 있습니까?공백을 맨 위와 본문 div 태그

공백은 브라우저 창 상단에 표시되며 두 개의 div 태그 컨테이너 (모든 브라우저.)

P, 신체, HTML, 모든 사업부, 모든 여백 사이 : 0 픽셀;

Gracias.

답변

0

는 그것이 부모 컨테이너에 넣어 마진 탑의 꼭대기 대부분의 컨테이너 이후, 나는 W3C 문서가 왜 거기에 확신이다 그렇습니다. 그러나 그것은 그것과 같습니다. 컨테이너의 맨 위에있는 요소를 멀리 옮기고 싶다면, 부모 클래스에 패딩을 사용해야합니다.

+0

안녕 패트릭. 이것에 대해 나에게 계몽을 가져 주셔서 너무 감사드립니다. 나는이 문제를 부모/컨테이너 마진으로 보지 못했습니다. 난 그 일을 한번도 해본 적이 없지만 부모 컨테이너가 개발자 도구 (chrome inspect 요소, 방화 광구 등)를 사용하여 첫 번째 div 태그의 여백 속성을 사용하더라도 해당 컨테이너에 대해 여전히 0 픽셀의 여백을 반환한다는 점이 흥미 롭습니다. . 왜 이런 일이 발생했는지에 대해 약간의 통찰력을 주셔서 감사합니다. – RCNeil

+0

이 특별한 경우에는 CSS 상자 모델에 대한 부족 지식으로 귀결됩니다. 개발자 도구는 컨테이너에 적용된 설정 만 알려주고이 설정과 같은 사례의 상속에 대해서는 설명하지 않습니다. 밖을 내다 보는 또 다른 사람은 마진을 무너 뜨리는 것입니다. 예를 들어'

'태그는'margin-top : 10px; margin-bottom : 10px'는'20px'가 아닌'10px' 공간을 가질 것입니다. –

2

menu-container div의 여백 맨 위에는 margin-top: 20px;이 있습니다. FireBug를 사용하여 보았습니다. margin-top: 20px; 오프 <div class="menucontainer">의 제거 및 <div class="lightsandcolorscontainer">

추론에 padding-top: 20px;을 넣어

0

.menucontainer

.centercontainer 너무 margin: 10px auto;

세트 margin: 0 auto;

및 추가 overflow: hidden;

(.centercontainer에) 개발자를 가지고 margin-top: 20px;

세트 margin-top: 0;에있다 파이어 폭스 :

편집에 방화범을 그대로 크롬에서 LS는 큰 도움이됩니다 : 당신이 당신의 .menucontainer이 낮은 20 픽셀 수 padding-top: 20px; 또한, 콘텐츠 폭이 1000px로 설정되어

.lightsandcolourcontainer에 추가하려는 경우 - 조심 가로 스크롤 막대에 대해 24px 만 허용하므로 일부 브라우저에서는보기 흉하고 불필요한 세로 스크롤 막대의 부작용이있을 수 있습니다. 960px - 980px 최대 페이지 폭은 1024x768이 방문자 모니터의 가장 보편적 인 해상도이기 때문에 대부분의 방문자 브라우저에 수직 스크롤이 나타나지 않도록하기 위해 채택 된 웹 표준입니다.