0
（我在做一个网站，通过自己和它的第一次。我是因为我的帖子主要是编码追加写这篇文章。）图像大小和一个div尺寸不匹配
我添加了一个图像右边的div 'about_Cell2'，但我不知道那里的约1px的空间来自..
请帮助我..
* { 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 {
\t color: #333;
}
.nav, .div-right a:visited{
color: #555;
}
.submenu a {
text-decoration:none;
color:#333;
}
.submenu a:hover {
\t 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 {
\t text-decoration: none;
\t 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{
\t 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{
\t 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;
\t 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 {
\t color: #333;
}
.nav, .div-right a:visited{
color: #555;
}
.submenu a {
text-decoration:none;
color:#333;
}
.submenu a:hover {
\t 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 { \t
position: relative;
margin: 0px auto 0px auto; \t \t
width: 1032px; \t
max-width: 1032px;
}
#logo {
font-family:Cambria, serif;
}
#logo a {
text-decoration: none;
}
a {
\t text-decoration: none;
\t 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{
\t 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;
\t 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;
\t width: 51%;
height: 350px;
\t vertical-align: middle;
}
.about_low3{
\t background-color: #eee;
\t height: 150px;
}
/*div about*/
.Table
{
\t 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;
\t width: 500px;
height: 650px;
}
.Cell1
{
display: table-cell;
padding-left: 0px;
padding-right: 0px;
background-color: #000;
\t width: 532px;
\t height: 650px;
\t vertical-align: middle;
\t color: #eee;
}
.cell_left{
padding-left: 80px; \t
}
<!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 © 2015 Baan Yang</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra- space-below-the-image – 2015-02-07 00:28:11