위쪽에있는 div 뒤에 불필요한 공백이 있음 : -7

-1

다음 예에서 원하지 않는 공백을 제거하려면 어떻게합니까?위쪽에있는 div 뒤에 불필요한 공백이 있음 : -7

참고 1. #red는 다른 두 개의 #green 및 #blue의 상위이기 때문에 빨간색이 없어야합니다.

참고 3. # 녹색 및 # 파란색 모두 높이를 알 수 없습니다.

주 2 #blue는 "최고 : -10px"extera이 CSS 속성을, 그래서 최대 10px로 제공하지만, 부모 요소는 (#red) 새로운 위치

<html> 
<head> 
<style> 
    #red{width: 500px;background: red;height: auto;} 
    #green{width: 500px;background: green;position: relative;float: left;} 
    #blue{width: 500px;background: blue;top:-7px;position: relative;float: left;} 
    .clear{clear: both;} 
</style> 
</head> 
<body> 
    <div id="red"> 
     <div id="green">Green<br>Green<br>Green<br>Green<br>Green</div> 
     <div id="blue">Blue<br>Blue<br>Blue<br>Blue<br>Blue</div> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

출처

2012-03-26 user1243815

코드에 공백이 없습니다. http://jsfiddle.net/vGG3a/ – Sparky

@ Sparky672 : 파란색을 이동하여 생성되는 파란색 상자의 하단에 빨간색의 추가 7 픽셀을 의미합니다. 상자가 7px 올라가 상대 위치가됩니다. – animuson

어떤 브라우저입니까? 유효한'doctype'을 사용하고 있습니까? 귀하의 페이지가 유효합니까? – Sparky

에 맞게 verticaly 크기를 조정하지 않습니다 나는 부모님과 같은 너비의 물건을 왜 떠 다니는지 이해하지 못합니다. 또한 여기서 position: relative을 사용하는 것은 필요하지 않습니다. 여기에 정확히 달성하기 위해 훨씬 더 간단한 방법은 당신이 무엇에 관해 얘기하는지입니다 :

<div id="red"> 
    <div id="green"> 
     Green<br>Green<br>Green<br>Green<br>Green 
    </div> 
    <div id="blue"> 
     Blue<br>Blue<br>Blue<br>Blue<br>Blue 
    </div> 
</div>

#red{ 
    width: 500px; 
    background: red; 
    height: auto; 
} 
#green{ 
    background: green; 
} 
#blue{ 
    background: blue; 
    margin-top: -7px; 
    /* Necessary so the text in #green doesn't appear over the blue background */ 
    position: relative; 
    z-index: 100; 
}

View the jsFiddle.

출처

2012-03-26 23:40:17 animuson

-1

이 사업부에 추가 #red

최고 : 0; 위치 : 고정;

출처

2012-03-26 23:41:52 dav

위쪽에있는 div 뒤에 불필요한 공백이 있음 : -7

답변

관련 문제