为什么边框与内容不对齐？

时间：2021-04-04 16:35:39

标签： html css image border

我是 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>&nbsp 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>

https://jsfiddle.net/wp9cn3kt/1/

2 个答案:

答案 0 :(得分：1)

只需为您的图像赋予 display: block; 属性即可。

/* 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" style="display: block;" 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>&nbsp 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>

答案 1 :(得分：-1)

如果你想要一个简单的修复，你可以尝试将 id="photo" 放在 img 元素而不是容器中（如果不需要容器）。

<div> <!--Skyline Photo-->
    <img id="photo" 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>

原始代码中的样式：

#photo {
  border-width: 3%;
  border-style: solid;
  border-color: rgb(253, 0, 232);
}
相关问题
最新问题