【发布时间】：2021-06-30 18:05:55
【问题描述】：
我是 CSS/HTML 的新手，我不明白为什么边框不与内容/图像对齐。底部边框偏移了几个像素，在图片边缘和实际边框之间留下了间隙。有谁知道如何解决这个问题？
/* Body */
body {
background-image: url("https://i.pinimg.com/originals/a4/bf/58/a4bf58276d674626f52092e2194f79d8.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
/* Title */
h1 {
background-color: rgba(255, 255, 255, 0.5);
height: auto;
margin: 0% 1% 2% 1%;
padding: 0% 10% 0% 10%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 225%;
color: white;
text-align: center;
line-height: 150%;
text-shadow: 2px 2px rgb(253, 0, 232);
}
/* Left Body Items */
#left {
float: left;
width: 67%;
margin-right: 2%;
margin-left: 1%;
}
/* Presentation Text */
#intro_text {
background-color: rgba(255, 255, 255, 0.80);
padding: 2%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: black;
text-align: justify;
line-height: 130%;
}
/* Skyline Photo */
#photo {
border-width: 3%;
border-style: solid;
border-color: rgb(253, 0, 232);
}
/* Bar Menu */
/* Right Body Items */
#right {
float: right;
width: 30%;
}
/* Booking Button */
#button {
/* Booking Button */
background-color: black;
margin-bottom: 2%;
border-style: solid;
border-width: 2%;
border-color: white rgb(253, 0, 232) rgb(253, 0, 232) white;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
text-align: center;
text-decoration: underline;
font-weight: bold;
font-style: italic;
text-shadow: 1px 1px rgb(253, 0, 232);
}
/* Informations */
#infos {
/* General Information */
background-color: rgba(253, 0, 232, 0.6);
padding: 1% 3% 3% 3%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
}
.bold_underlined {
/* Information Headings */
font-weight: bold;
text-decoration: underline;
}
#metro {
/* Metro Information */
color: gold
}<h1>Rooftop Bar, in the center of NYC</h1>
<!--Title-->
<div id="blocks">
<!--Body-->
<div id="left">
<!--Left Body Items-->
<div id="intro_text">
<!--Presentation Text-->
The 23rd Street Rooftop Bar welcomes you every day for a unique New York experience. In the iconic neighborhood of Chelsea, the bar presents a magnificent view on the New York skyline at night. With DJs from all around the world, the Rooftop Bar offers
a vast assortment of music to suit all tastes: from Disco to Hip-Hop, passing by Pop and Electro. The perfect party for you!
</div>
<br>
<div id="photo">
<!--Skyline Photo-->
<img src="https://www.thepresslounge.com/wp-content/uploads/2014/06/Press_Lounge_0028-HDR-2-Edit-1600x900.jpg" alt="View from the rooftop." width="100%">
</div>
<br><br>
<div id="menu">
<!--Bar Menu-->
Menu
</div>
</div>
<div id="right">
<!--Right Body Items-->
<div id="button">
<!--Booking Button-->
<p>
Book now!
</p>
</div>
<div id="infos">
<!--Informations-->
<p>
<!--Age & ID-->
<em>All guests must be aged 21 or older.<br>
A valid ID is required.<br></em>
<br>
<!--Opening Hours-->
<span class="bold_underlined">Opening Hours:</span><br> Mon: 5pm-1am<br> Tue: 5pm-1am<br> Wed: 5pm-1am<br> Thu: 5pm-1am<br> Fri: 5pm-2am<br> Sat: 2pm-3am <br> Sun: 2pm-8pm<br>
<br>
<!--Contact Info-->
<span class="bold_underlined">Contact Info:</span><br>
<em>???? +1 917-722-2439</em><br> ????
<em>  info@rtnyc.com </em><br>
<br>
<!--Location-->
<span class="bold_underlined">Access:</span><br>
<span id="metro"><strong>Ⓜ</strong> 23rd Street</span><br>
<em>119 W 23rd St, New York, NY 10011, USA</em>
</p>
<!--Embeded Map-->
<iframe src="https://snazzymaps.com/embed/187161" width="100%" height="250px" style="border:none;" title="Google Map of Rooftop Party location"></iframe>
</div>
</div>
</div>【问题讨论】：
-
@AnuragSrivastava 图像尺寸与它无关。使用背景图像而不是图像标签是一种非常简单的方法。空白区域称为：
inline decender space。简单的解决方法是在图像上使用display: block;，这样它就不会从内联元素中获得一个减速空间。 -
@tacoshy 啊，我明白了，有道理。你是对的。虽然我想要一些关于“非常糟糕的方法”的背景
-
@AnuragSrivastava 使用
display: block;几乎是一种单行解决方案。简单应该永远赢。使用背景图像需要多行。也不能确保以正确的纵横比显示完整图像。必须为此正确调整包含元素的大小。屏幕阅读器无法识别背景图像...与display: block;相比，可能会出现一些可能的问题，以及您需要更改大量代码行的方式。