전체 요소를 채우기 위해 배경색 가져 오기

이 코드가 왜 이렇게 작동하는지 이해하지 못합니다. 나는 이렇게 할 경우 ...전체 요소를 채우기 위해 배경색 가져 오기

HTML :

<body> 
    <header> 
     <h1> 
      MY HEADER 
     </h1> 
    </header> 

    <article> 
     <p>Lorem ipsum dolor sit amet...</p> 
    </article> 

    <footer> 
     <p>This is my footer</p> 
    </footer> 
</body>

CSS :이와 끝까지

body { 
    width: 60%; 
    margin: 0 auto; 
} 

article { 
    background: #AAA; 
} 

footer { 
    background: #888; 
} 


header { 
    color: #333; 
    background: #0F0; 
}

: enter image description here

을하지만 난에 테두리를 추가하는 경우 집단.

CSS :

body { 
    width: 60%; 
    margin: 20px auto; 
} 

article { 
    border: 1px solid red; 
    background: #AAA; 
} 

footer { 
    border: 1px solid red; 
    background: #888; 
} 


header { 
    border: 1px solid red; 
    color: #333; 
    background: #0F0; 
}

나는이와 끝까지 : enter image description here

는 왜입니까?

테두리를 추가하지 않고 두 번째 결과를 얻으려면 어떻게해야합니까?

편집 나는 마침내 간단한 정상화했다.

{ 여백 : 0; }

내가 처음 작성한 페이지는 초보자 그룹에게 간단한 HTML/CSS 페이지 작성 방법을 보여주기 때문에 처음부터 그걸 벗어나고 싶었습니다. 그리고 비 코더가 이러한 이상한 행동에 빠지지 않고 파악하는 것만으로는 충분하지 않다고 생각합니다. 나는이 생각

출처

2015-01-28 Christoffer

는 대부분의 HTML 요소가 일부 마진을 적용한 도움이됩니다.

다음 줄을 가장 위에 배치하여 CSS의 모든 요소에서 제거 할 수 있습니다.

*{margin:0;}

나중에 추가하는 단락 또는 기타 항목에 적용된다는 점에 유의하십시오. 개별 요소를 대상으로하는 것이 더 좋습니다.

각 요소에 높이 또는 패딩을 추가하여 약간의 공간을 줄 수도 있습니다. 행운

<style type="text/css"> 
*{ 
    margin:0; 
} 
    body { 
width: 60%; 
margin: 0 auto; 
} 

article { 
padding: 3px; 
background: #AAA; 
} 

footer { 
    padding: 3px; 
background: #888; 
} 


header { 
    padding: 3px; 
color: #333; 
background: #0F0; 
}

좋은!

출처

2015-01-28 22:43:17

은 어쩌면 당신 기본적으로

h1, p { margin:0; padding: 10px 0; }

출처

2015-01-28 22:40:51 fcastillo

<h1> 및 <p> 태그는 브라우저의 기본 스타일에서 스타일을 계승했습니다.

붕괴 여백으로 인해 약간의 기발한 행동이 있는데, 이는 around입니다.

Eric Meyers와 같은 것으로 정상화 한 다음 모든 것을 스타일링합니다. 이렇게하면 빌드 할 수있는 모든 브라우저에 대해 기본값 인이 제공되며 이러한 기발한 브라우저 동작 중 일부는 피할 수 있습니다.

편집이 같은 다른 사람이 행한 일 : 그것에 대해

Margin on child element moves parent element

출처

2015-01-28 22:44:51 Ding

이유는 margin collapsing입니다. 여백은 요소 사이의 거리를 지정하므로 자식 요소에 여백이 있고 부모 요소에 자식 요소를 포함 할 테두리 나 패딩과 같은 것이 없으면 부모 요소 사이에 거리가 있습니다. 당신은 부모 요소에 overflow 설정을 추가하는 경우

, 당신은 국경없이 동일한 효과를 얻을 수 있습니다

body { 
 
    width: 60%; 
 
    margin: 0 auto; 
 
} 
 

 
article { 
 
    background: #AAA; 
 
    overflow: hidden; 
 
} 
 

 
footer { 
 
    background: #888; 
 
    overflow: hidden; 
 
} 
 

 

 
header { 
 
    color: #333; 
 
    background: #0F0; 
 
    overflow: hidden; 
 
}

<header> 
 
    <h1> 
 
    MY HEADER 
 
    </h1> 
 
</header> 
 

 
<article> 
 
    <p>Lorem ipsum dolor sit amet...</p> 
 
</article> 
 

 
<footer> 
 
    <p>This is my footer</p> 
 
</footer>

또 다른 대안은 0으로 모든 여백을 설정하는 것입니다 자식 요소를 사용하고 대신 패딩을 사용하십시오.

출처

2015-01-28 22:45:36 Guffa

전체 요소를 채우기 위해 배경색 가져 오기

답변

관련 문제