내 레이아웃의 맨 아래에 얇은 줄 (어쩌면 1px)이 있는지 궁금해하고 있으며, 마지막으로 Eric Meyer의 재설정에서 body {line-height: 1;}을 정확히 찾아 냈습니다. 파일. 어떤 이유로,이 설정으로 인해 html 요소가 내 바닥 글 바로 앞까지 확장됩니다.CSS 리셋의 'Line-height : 1'은 HTML 배경이 확장되도록합니다.
배경색이 회색 인 기본 div가있는 슈퍼 간단한 페이지에서 html 배경을 빨간색으로 설정하여 창 아래쪽에 선이 표시되도록했습니다. 메인 div, p 태그 또는 img의 높이 설정을 사용하여 재생하면 메인 div의 높이 설정이있을 때만 선이 사라집니다. (나는 실제 프로젝트를 수정하기 위해 그 정보를 사용하려고 시도했지만 거기에서 작동하지 않는 것 같습니다 ...)
내가 무슨 말을하는지보고 싶다면 간단한 jsfiddle을 만들었습니다. - http://jsfiddle.net/DFDj8/ - 변경 #main img {height: 800px;}은 단지 #main {height: 800px;}으로 하단의 빨간색 선을 제거합니다. 재설정에서 line-height 설정을 주석 처리하는 것은 동일합니다.
어떤 일이 일어나고 있는지 생각해보십시오. 이것에 대해 설명하는 다른 게시물이 있다면 링크를 자유롭게하십시오. 비슷한 것을 찾을 수 없습니다.
감사합니다.
* 마지막 요소로 블록 레벨 바닥 글 업데이트 jsfiddle - http://jsfiddle.net/DFDj8/6/
jsfiddle의 코드는 에릭 마이어의 재설정과 다음이 포함
html, body {
background: red;}
#main {
background: gray;}
#main img {
height: 800px;
display: block;}
<body>
<div id="main">
<p>paragraph paragraph</p>
<img src="http://auntdracula.com/wp-content/uploads/2013/05/Delicious_Steaz_Soda.jpg" />
</div>
<footer>
<p>© 2013</p>
</footer>
</body>
에 오신 것을 환영합니다 SO에! 질문에 답변 할 수있는 기회를 최대화하기 위해 외부 사이트에 링크하는 대신 코드의 [짧고 독립적 인 그리고 정확한] (http://sscce.org/) 예제를 게시하십시오. – idoby