我是编码的新手，花了几天的时间试图弄清楚如何消除网页底部的空白。
我已将CSS代码通过CSS校正器在线放置，在所有元素周围放置了红色边框，以尝试识别可能正在创建大边框或填充的元素，将HTML和body元素的高度和宽度更改为-有用。另外，我尝试更改地图的'px'值（因为它很大，可能会将所有内容推得更低），但是当我这样做时似乎无法达到我想要的位置。
我所有的CSS都随附了：
html, body {
background-color: #222909;
font-family: "Comic Sans MS", cursive, sans-serif;
color: yellow;
}
/* Here I have created a class to apply a solid, round and yellow border around all my frog images. As I
wanted the images to be consistent with the rest of the web page design. */
.Frog_Blog_Border {
border-style: solid;
border-color: yellow;
border-radius: 50%;
}
/* Here the style and position of the Frog Blog header is determined. I decided I wanted the header to be
centered so used the'diplay', 'margin-left' and 'margin-right' option to do so. Again, I chose the map font. I wanted the border
to stand out, so created a solid and rounded yellow border around it using the 'border' options in CSS. */
.Frog_Blog_Header {
display: block;
margin-left: auto;
margin-right: auto;
width: 904px;
height: 150px;
border-style: solid;
border-color: yellow;
border-radius: 5px;
position: relative;
}
/* Here the style and position of the map div is determined using an ID selector. I decided I wanted to fit images around
my map, so resized the map and used 'diplay', 'margin-left' and 'margin-right' to centre it. Again, I chose the map font
to be 'Comic Sans MS' for consistency, the font to be bold to stand out and font size to be 16pt. I wanted the map to stand
out, so created a solid and rounded yellow border around it using the 'border' options in CSS. */
#map {
width: 600px;
height: 500px;
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
font-size: 16px;
display: block;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: yellow;
border-radius: 5px;
position: relative; /* Here I wanted to position my map so that it was below the header and text of the page, so used the
'position' option set to 'relative' to move the image around the page. */
bottom: 1105px; /* 'bottom' here refers to how far from the bottom in pixels the image was moved. */
left: 5px;
}
/* Here, I am styling the text for the map legend, which is taking the same properties of being yellow, bold and 'Comic
Sans MS from the body and html styling above, but adding some padding and alignment to it, so that the accompanying legend colour
scale does not overlap with the text. */
.legend {
font-size: small;
padding-top: 10px;
text-align: left;
line-height: 18px;
position: relative; /* Here I am using the 'position' option set to 'relative' to move the image left and from the bottom, up
the page. */
bottom: 1100px;
left: 325px;
}
/* Here I am styling the legend colour scale, adding alignment and margins to ensure it doesn't overlap with the text. */
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
}
.Yellow_Eyed_Frog_Caption {
position: relative;
left: 35px;
}
.Agalychnis_Annae{
position: relative;
}
.Black_Eyed_Frog_Caption {
position: relative;
left: 45px;
}
/* This is positioning the second frog image. */
.Agalychnis_Moreletii {
position: relative;
top: 2px;
}
.Lemur_Leaf_Frog_Caption {
position: relative;
bottom: 560px;
left: 950px;
}
/* This is positioning the third frog image. */
.Lemur_Leaf_Frog {
position: relative;
bottom: 560px;
left: 950px;
}
.Lemur_Leaf_Frog_2_Caption {
position: relative;
bottom: 560px;
left: 950px;
}
/* This is positioning the fourth frog image. */
.Lemur_Leaf_Frog_2 {
position: relative;
bottom: 565px;
left: 950px;
width: 300px;
height: 200px;
}
/* This is positioning the source link for the Frog Blog header below the main Frog Blog header image. */
.Image_Source {
position: relative;
left: 860px;
}
/* This is positioning the from image source link found below the third frog image. */
.Image_Source_2 {
position: relative;
left: 40px;
top: 610px;
}
/* This is positioning the tile source link found below the third frog image. */
.Tile_Source {
position: relative;
left: 40px;
top: 607px;
}