我的示例網頁有一個奇怪的空間空間,我只是無法弄清楚它爲什麼在那裏。該頁面的鏈接在這裏「http://www.albany.edu/~jc191638/html/finalproject.html」我認爲它會更容易看看那裏的源代碼,而不是粘貼它。我正在談論的空白空間是在「計算機科學教科書」部分,並拋出底部的對齊。找不到空白空間來自哪裏
這個頁面的CSS是這裏
body
{
background-color: #DCDDD8;
margin:0;
}
p
{
clear:left;
}
hr
{
width:98%;
}
img
{ width:100%;
height:100%;
float:center;
}
h1
{
text-align:center;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
border-style:solid;
border-color: #D74B4B;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:1200px;
float:center;
}
#upper
{
float:center;
}
#upperleft
{
//margin:2%;
//border:1px solid;
//border-radius:2px;
float:left;
width: 600px;
height:300px;
//margin:0%;
//border:1px solid;
border-radius:2px;
}
#upperright
{
//float:right;
//margin:2%;
//border:1px solid;
//border-radius:2px;
float:right;
width: 600px;
height:300px;
//margin:0%;
//border:1px solid;
border-radius:2px;
}
div
{
float:left;
}
#middle
{
width:100%;
float:center;
}
#header
{
height:150px;
width:100%;
background-color:#DCDDD8;
}
#sidebar
{
float:left;
height:984px;
width:250px;
background-color: #475F77;
border-style:solid;
border-color: #D74B4B;
}
#iphone
{
height:230px;
width:230px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}
#bottomside
{
background-color: #475F77;
padding-left:10px;
padding-right:10px;
text-align:center;
}
#googleglass
{
height:230px;
width:230px;
}
#navbar
{
width:107%;
background-color: #DCDDD8;
}
.navele
{
width:10%;
text-align:center;
border-style:solid;
border-color: #D74B4B;;
}
a:link, a:visited
{
font-size:20px;
font-weight:bold;
color: #475F77;
display:block;
padding-top:3px;
padding-bottom:5px;
text-decoration:none;)
}
a:hover
{
color: #DCDDD8;
background-color:#475F77;
}
#border
{
height:800;
width:150;
border:10px;
padding-left:50px;
}
#current
{
float:center:
height:984px;
width:600px;
background-color: #475F77;
padding-bottom:10px;
text-align:center;
border-style:solid;
border-color: #D74B4B;
}
#nintendo
{
height:70%;
width:70%;
padding-left:10px;
}
#nintext
{
float:right;
padding-right:15px;
padding-top:100px;
}
#wrapper2
{
margin-left:auto;
margin-right:auto;
width:125px;
float:right;
}
#wrapper3
{
margin-left:auto;
margin-right:auto;
width:600px;
float:center;
background-color: #475F77;
}
#textbook
{
height:25%;
width:25%;
float:left;
padding-left:15px;
}
#wrapper4
{
margin-left:auto;
margin-right:auto;
width:125px;
float:center;
padding-top:50px;
padding-left:150px;
}
#iclicker
{
height:30%;
width:30%;
float:left;
padding-left:15px;
padding-bottom:10px;
}
#clicktext
{
float:right;
}
#wrapper5
{
margin-left:auto;
margin-right:auto;
width:250px;
float:center;
padding-top:75px;
padding-left:250px;
}
#bar
{
width:100%;
}
#pens
{
height:40%;
width:40%;
float:left;
padding-left:15px;
}
#wrapper6
{
margin-left:auto;
margin-right:auto;
width:150px;
float:center;
padding-top:50px;
padding-left:300px;
}
#rightbar
{
float:right;
height:984px;
width:250px;
background-color: #475F77;
text-align:center;
border-style:solid;
border-color: #D74B4B;
}
#login
{
float:center;
padding-left:15px;
}
#bottom
{
width:1197px;
height:30px;
text-align:center;
background-color: #475F77;
border-style:solid;
border-color: #D74B4B;
padding-top:15px;
margin-top:15px;
}
#items
{
width:70%;
text-align:center;
float:left;
}
#cart
{
width:30%;
text-align:center;
text-style:bold;
float:right;
}
#fb
{
height:5%;
width:18%
}
不確定哪個空間打擾你,但它有時是共同執行像CSS中的「復位」:身體,HTML { 保證金:0; 填充:0; } – NoChance
請刪除不必要的空格來清理此代碼。這將使其更具可讀性。 – BuddhistBeast