공백 후 이미지

CSS로 작업하는 방법을 배우고 있습니다. 현재 CSS 배치에 대해 배우려고합니다. 각 div 섹션에 다른 배경색을 사용하므로 코드를 변경할 때 페이지의 어느 부분이 영향을 받는지 알 수 있습니다.공백 후 이미지

지금 헤더 페이지에서 작업 중이며 이해가 안되는 한 가지가 있습니다. 로고가 있고 자체 div 안에 넣습니다. 내가 볼 수있는 문제는 로고 아래에 공백이 있고 (나는 div의 분홍색 배경색을 사용한다) 나는 그것을 없앨 수 없다. 아래 코드는 내가 사용하는 코드와 헤더가 현재 보이는 스크린 샷입니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Print Repair Form</title> 
    <style type="text/css"> 
    * { 
     margin:0; 
     padding:0; 
     font: 12px/1.5 Georgia, serif; 
    } 

    #page-wrap { 
     width: 800px; 
     margin: 0 auto; 
    } 

    #header { 
     background-color:#88d; 
     overflow: auto; 
    } 

    #logo { 
     float:left; 
     background-color: #ffccff; 
    } 

    #logo a img { 
     border:none; 
    } 

    #address-container { 
     display: table; 
     float: left; 
     width: 164px; 
     background-color: #FC730A; 
     height: 104px; 
    } 

    #address-content{ 
     display:table-cell; 
     vertical-align: middle; 
    } 

    #repair-header { 
     background-color:#d4d4d4; 
     float:left; 
     width:380px; 
    } 

    #customer-info { 
     float: left; 
     width:220px; 
     background-color: #ffff99; 
    } 

    #wo-info { 
     background-color: #99ff99; 
    } 

    #content { 
     clear:both; 
     background-color:#33d; 
    } 
    </style> 
</head> 
<body> 
    <div id="page-wrap"> 
    <div id="header"> 
     <div id="logo"> 
     <a href="/fms/"><img src="/fms/images/windows8-cropped.jpg" /></a> 
     </div> <!-- div logo --> 
     <div id="address-container"> 
     <div id="address-content"> 
      456 Some Addresses <br /> 
      The City, XP 444411 <br /> 
      1-800-000-0000 <br /> 
      www.someaddress.com 
     </div> 
     </div> 
     <div id="repair-header"> 
     <p>Repair Detail</p> 
     </div> 
     <div id="customer-info"> 
     <p>12345678</p> 
     <p>Facility Name</p> 
     </div> 
     <div id="wo-info"> 
     <p>WO: 12345789</p> 
     </div> 
    </div> <!-- div header --> 
    <div id="content"> 
     <p>Content is here</p> 
    </div> 
    </div> <!-- div page-wrap --> 
</body> 
</html>

web-header

출처

2012-11-26 Johan Gunawan

로고 div의

#logo { 
    float:left; 
    background-color: #ffccff; 
    line-height: 0; 
}

에 재산

line-height: 0;

을 추가로 이미지 CSS를 수정

#logo a img { 
    border:none; 
    vertical-align:bottom; 
}

출처

2012-11-26 20:02:01

코드를 추가했지만 여전히 작동하지 않습니다. IE9 및 Firefox 16.0.2를 사용하여 웹 페이지를 보았습니다. –

맞습니다. 방금 대답을 수정하고 IE9에서 테스트했습니다. 공장. 잠시 머리를 긁적 거렸다면 여기에서 맨 아래 줄에 대한 대답을 얻었습니다. http://askthecssguy.com/articles/inline-images-showing-a-gap-of-space-on-the-bottom-and-one-way-to-get-around-it/ –

디스플레이를 사용하여 종료했습니다. : #logo a img 내에서 차단하십시오. 수직 정렬 사용 : 하단은 다른 div를 엉망으로 만듭니다. –

공백 후 이미지

답변

관련 문제