CSS : 여백에 보이지 않는 배경

이것은 생각보다 간단하기 때문에 코드를 붙여 넣을 것입니다.CSS : 여백에 보이지 않는 배경

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style> 
     *{ 
      margin:0; 
      padding:0; 
     } 

     .c1 { 
      background: yellow; 
      width: 800px; 
     } 

     .c2 { 
      background: blue; 
      margin: 50px; 
     } 
    </style> 
</head> 
<body> 

<div class="c1"> 
    <div class="c2"> 
     1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 
    </div> 
</div> 

</body> 
</html>

문제는 페이지 상단이나 하단에 노란색 스트립이 표시되지 않는 이유입니까? 나는 그것이 c1의 제어 된 공간에 있어야한다고 생각하지만 배경색은 보이지 않습니다.

출처

2013-07-20 Mike Lee

float : left를 C1로하고 확인하십시오. 그러면 노란색 스트립이 생깁니다. –

붕괴 여백 때문입니다. 당신의 C1 규칙에 overflow:auto을 추가

.c1 { 
    background: yellow; 
    width: 800px; 
    overflow:auto; 
}

jsFiddle example

출처

2013-07-20 14:32:08 j08691

고마워, 좋은 해결책. –

이 마진 축소 문제입니다. 이 인스턴스에서 원하는 효과를 위해 c1에 패딩을 추가합니다. 나는 마진 붕괴를 둘러싼보다 복잡한 문제에 답을 하였지만 그러한 대책이 필요하지 않다.

출처

2013-07-20 14:35:00 Vector

CSS : 여백에 보이지 않는 배경

답변

관련 문제