图片尺寸和 div 尺寸不匹配

Question

(我是自己做网站，第一次做，因为我的post主要是代码，所以加了这篇。)

我在右边添加了一张图片div'about_Cell2'，但是我不知道大约1pxspace来自哪里..

请帮帮我..

* { padding: 0; margin: 0; }

body {
 font-family: Helvetica, Verdana, sans-serif;
 font-size: 13px;
}

.div-left{
    float:left;
    padding-left:0px;
    padding-right:0px;
    font-family:Helvetica, Verdana, sans-serif; 
    letter-spacing: 2px;
}

.div-right{
    float:right;
    padding-top:14px;
    font-family:Helvetica, Verdana, sans-serif;
}

.div-left p{
    font-size: 2.0em;
}

.header{
    height:40px;
    padding-top:9px;

}

/* menu& submenu */


.nav {
    height:30px;
}
 

.nav2 {
    height:30px;
    margin-bottom:50px;

}

.nav li {
    list-style-type:none;
    float:left;
    padding-left:30px;
    letter-spacing: 2px;
}

.nav2 li {
    list-style-type:none;
    float:left;
    padding-left:30px;
    letter-spacing: 2px;
}

 

.nav a {
    text-decoration:none;
    color:#333;
  
} 

.div-left a:hover {
 color: #333;
}

.nav, .div-right a:visited{
    color: #555;
}

.submenu a {
    text-decoration:none;
    color:#333;
  
}

.submenu a:hover {
 color: #333;
}

.submenu a:visited{
    color: #555;
}

.submenu li {
    float:left;
    list-style-type:none;
    padding-left:0px;
    letter-spacing: 2px;
    font-family: Cambria, serif;
    font-size: 1.5em;
}




ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

#wrapper { 
 margin: 0 auto;
 width: 1032px;
 align: center;
}

 
 

#logo {
     font-family:Cambria, serif;
}

 

#logo a {
     text-decoration: none;
     
}


a {
 text-decoration: none;
 color: #333;
 
}

#sub_logo {
    font-family:Helvetica, Verdana, sans-serif;
}


.content { 
    max-height:auto; 
    max-width:auto;
 
    padding-top:25px;
}


.content .about{
}

.content .main0 .nav{
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    text-align: center;
     font-family:Cambria, serif;
    font-size: 1.5em;

}

.content .main0 .nav2{
    margin-left: auto;
    margin-right: auto;
    width:700px;
    text-align: center;
     font-family:Cambria, serif;
    font-size: 1.5em;
    font-weight: bold;

}

.main0 {
    background-color: #eee;
    height: 50px; 
    line-height:45px;
}

.content .main1 span{
    font-size:4.0em;
    letter-spacing : 3px;
     font-family:Cambria, serif;
    color: #fff;
}


.main2{

     margin:  0px 0px 0px 0px;

}
 

.t1 {
      margin: 0px 0px 0px 0px;
      padding: 0px;
}

.menus{
 width: 1032px; 
}

.menu_left{
      width: 520px;

}

.menu_right{
    background-color: #333;
}



.t1 th {
    max-width: 344px;
      margin: 0px 50px 50px 0px;
     font-family:Cambria, serif;
    font-size:2.0em;
    letter-spacing: 2px;
}


.t1 td{
    max-width: 344px;
    text-align: center;
      margin: 0px 0px 0px 0px;
     padding: 5px;
}

t1 .des{
    text-align: center;
    padding: 10px 10px 10px 10px;
    letter-spacing : 2px;
    line-height:16px;
}

t1 .des span{
    font-family: Helvetica, Verdana, sans-serif;
    font-size: 1.0em;
    line-height:16px;
}



.main1{
      background: url(img/1.jpg);
    height: 500px;
        text-align: center;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
}

.main3{
    text-align: center;
     margin: 0px 0px 25px 00px;
      padding-top: 20px;
    padding-bottom : 55px;
    height: 120px;
    background-color: #e3e3e3;

}

.main3 .main3_depth{
   margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.main1 .main3_depth{
  margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.main3 .main3_depth p{
     font-size: 1.7em;
     font-family:Cambria, serif;
     letter-spacing: 2px;
}

.main1 .main3_depth p{
     font-size: 1.3em;
     font-family:Helvetica, Verdana, serif;
     letter-spacing: 2px;
     color: #fff;
}


.cta{ 
    border: 1px solid #333;
  margin-left: auto;
    margin-right: auto;
 line-height: 25px;
    width: 130px;
    height : 30px; 
}


.content .main2 .t1 th a{
    color: #b76115;
}

#footer { 
 font-family:Helvetica, Verdana, sans-serif;
 color: #fff;
 height: 20px;
 background-color:#333;
 margin: 20px 0px 10px 0px;
 padding: 20px;
 text-align: center;
 font-size:0.8em;
 letter-spacing: 2px;
 clear:both;
 text-align:center; 
}


/* div table  */
* { padding: 0; margin: 0; }

body {
 font-family: Helvetica, Verdana, sans-serif;
 font-size: 13px;
}

.div-left{
    float:left;
    padding-left:0px;
    padding-right:0px;
    font-family:Helvetica, Verdana, sans-serif; 
    letter-spacing: 2px;
}

.div-right{
    float:right;
    padding-top:14px;
    font-family:Helvetica, Verdana, sans-serif;
}

.div-left p{
    font-size: 2.0em;
}

.header{
    height:40px;
    padding-top:9px;

}

/* menu& submenu */


.nav {
    height:30px;
}
 

.nav2 {
    height:30px;
    margin-bottom:50px;

}

.nav li {
    list-style-type:none;
    float:left;
    padding-left:30px;
    letter-spacing: 2px;
}

.nav2 li {
    list-style-type:none;
    float:left;
    padding-left:30px;
    letter-spacing: 2px;
}

 

.nav a {
    text-decoration:none;
    color:#333;
  
} 

.div-left a:hover {
 color: #333;
}

.nav, .div-right a:visited{
    color: #555;
}

.submenu a {
    text-decoration:none;
    color:#333;
  
}

.submenu a:hover {
 color: #333;
}

.submenu a:visited{
    color: #555;
}

.submenu li {
    float:left;
    list-style-type:none;
    padding-left:0px;
    letter-spacing: 2px;
    font-family: Cambria, serif;
    font-size: 1.5em;
}




ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

#wrapper    {     
position: relative;
margin: 0px auto 0px auto;  
width: 1032px; 
max-width: 1032px;
}
 
 

#logo {
     font-family:Cambria, serif;
}

 

#logo a {
     text-decoration: none;
     
}


a {
 text-decoration: none;
 color: #333;
 
}

#sub_logo {
    font-family:Helvetica, Verdana, sans-serif;
}


.content { 
    max-height:auto; 
    max-width:auto;
 
    padding-top:25px;
}


.content .about{
}

.content .main0 .nav{
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    text-align: center;
     font-family:Cambria, serif;
    font-size: 1.5em;

}

.content .main0 .nav2{
    margin-left: auto;
    margin-right: auto;
    width:700px;
    text-align: center;
     font-family:Cambria, serif;
    font-size: 1.5em;
    font-weight: bold;

}

.main0 {
    background-color: #eee;
    height: 50px; 
    line-height:45px;
}

.content .main1 span{
    font-size:4.0em;
    letter-spacing : 3px;
     font-family:Cambria, serif;
    color: #fff;
}


.main2{

     margin:  0px 0px 0px 0px;

}
 

.menus{ 
}
 



.t1 {
      margin: 0px 0px 0px 0px;
      padding: 0px;
}


.t1 th {
    max-width: 344px;
      margin: 0px 50px 50px 0px;
     font-family:Cambria, serif;
    font-size:2.0em;
    letter-spacing: 2px;
}


.t1 td{
    max-width: 344px;
    text-align: center;
      margin: 0px 0px 0px 0px;
     padding: 5px;
}

t1 .des{
    text-align: center;
    padding: 10px 10px 10px 10px;
    letter-spacing : 2px;
    line-height:16px;
}

t1 .des span{
    font-family: Helvetica, Verdana, sans-serif;
    font-size: 1.0em;
    line-height:16px;
}



.main1{
      background: url(img/1.jpg);
    height: 500px;
        text-align: center;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
}

.main3{
    text-align: center;
     margin: 0px 0px 25px 00px;
      padding-top: 20px;
    padding-bottom : 55px;
    height: 120px;
    background-color: #e3e3e3;

}

.main3 .main3_depth{
   margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.main1 .main3_depth{
  margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.main3 .main3_depth p{
     font-size: 1.7em;
     font-family:Cambria, serif;
     letter-spacing: 2px;
}

.main1 .main3_depth p{
     font-size: 1.3em;
     font-family:Helvetica, Verdana, serif;
     letter-spacing: 2px;
     color: #fff;
}


.cta{ 
    border: 1px solid #333;
  margin-left: auto;
    margin-right: auto;
 line-height: 25px;
    width: 130px;
    height : 30px; 
}


.content .main2 .t1 th a{
    color: #b76115;
}

#footer { 
 font-family:Helvetica, Verdana, sans-serif;
 color: #fff;
 height: 20px;
 background-color:#333;
 margin: 20px 0px 0px 0px;
 padding: 20px;
 text-align: center;
 font-size:0.8em;
 letter-spacing: 2px;
 clear:both;
 text-align:center; 
}


/* div table  */
.Table
    {
        display: table;

    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
        padding: 0px; 
    }

    .Heading
    {
        display: table-row;
    }

    .Row
    {
        display: table-row;
    }

    .Cell1
    {
        display: table-cell; 
        padding-left: 0px;
        padding-right: 0px;
        height: 350px;
    }

    .Cell2
    {
        display: table-cell; 
        text-align: center; 
        padding-left: 0px;
        padding-right: 0px;
        background-color: #eee;   
 width: 51%;
    height: 350px;
 vertical-align: middle;
    }

    .about_low3{
 background-color: #eee;
 height: 150px;
    }

 

/*div about*/

.Table
    {
 width: 100%;
        display: table;

    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
        padding: 0px; 
    }

    .Heading
    {
        display: table-row;
    }

    .Row
    {
        display: table-row;
    }

    .about_Cell2
    {
        display: table-cell; 
        padding-left: 0px;
        padding-right: 0px;
 width: 500px;
        height: 650px;
 
    }

    .Cell1
    {
        display: table-cell;  
        padding-left: 0px;
        padding-right: 0px;
        background-color: #000;   
 width: 532px;
 height: 650px;
 vertical-align: middle;
 color: #eee;
    }

    .cell_left{
        padding-left: 80px; 
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Baan Yang - Korean Thai Restaurant & Cafe</title>
</head>

 
 
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
  <!-- Begin Header -->
  <div class="header">
    <div class="div-left">
        <div id="logo"><a href="index.html"><p><strong>Baan Yang</strong></p></a></div>
        <div id="sub_logo">Korean Thai Restaurant and Cafe</div>
      </div>
    <div class="div-right">
      <ul class="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">Baan Yang</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="reservations.html">Reservations</a></li>
        <li><a href="location.html">Location</a></li>
        <li><a href="jeju.html">Jeju</a></li>
       </ul>
     </div>
   </div>
  <!-- End Header --> 

 
  <!-- Begin Content -->
 <div class="content" >

    <div class="Row">
        <div class="Cell1">
            <div class="cell_left">tttt</div>
        </div>
        <div class="about_Cell2"><img src="img/2.jpg" width="500px" height="650px" alt="baan yang" /></div>
     </div>
    <div class="about_low3"> </div>
    <!-- End Content -->
    
    
  <!-- Begin Footer -->
  <div id="footer">Copyright &#0169; 2015 Baan Yang</div>
  <!-- End Footer -->
 </div>
<!-- End Wrapper -->
</body>
</html>

Answer 1

尝试使用

<div class="about_Cell2" style="background-image:img/2.jpg"></div>

而不是

<div class="about_Cell2"><img src="img/2.jpg" width="500px" height="650px" alt="baan yang" /></div>

图片尺寸和 div 尺寸不匹配

An image size and a div size doesn't match

removing-whitespace