如何使 <div> 周围的边框比第一个 <p> 少 "white space"？

Question

下面是影响 div 和三个 p 的 CSS。我不知道如何减少边框内第一个 p 上方的 "white space" 。

#animal-info {
  max-width: 256px;
  padding: 8px;
  font-size: 15px;
  border: 1px solid lightgrey;
  border-radius: 5px;
}

我可以只围绕一个 p 创建相同的边框，并且边框会紧紧围绕 p 的顶部，但我想要一个边界围绕所有 3 个 p。

这有意义吗？从技术上讲，最后一个 p 下面还有 "white space"，但我对它的视觉效果没意见。

感谢您的帮助！

下面是HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Building the Prototype</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="container">
        <h1 style="text-align: center; line-height: 0px">Snow Leopard</h1>
        <!-- photo credit: https://patrickwiltrout.wordpress.com/, image 
        taken by ? -->
        <img src="snow-leopard.jpg" alt="Snow Leopard" style="border-radius: 
        5px">
        <div id="animal-info">
            <p id="interesting-fact">Snow leopards are unable to roar 
            because they have different, less developed vocal chords than 
            other leopards 
            and big cats.</p>
            <ul id="facts">
              <li><strong><span>Scientific Name</span>:</strong> 
              <em>Panthera Uncia</em></li>
              <li><strong><span>Average Length</span>:</strong> <em>80-135 
              cm</em></li>
              <li><strong><span>Average Lifespan</span>:</strong> <em>10-12 
              years</em></li>
              <li><strong><span>Habitat</span>:</strong> <em>Highlands of 
              Central Asia</em></li>
            </ul>
            <p id="summary">Known for their elusive nature, snow leopards 
            are referred to by locals as “mountain ghosts.” As one of the 
            most mysterious species on the planet, the snow leopard remains 
            one of the least understood, and seen, of the big cats.</p>
        </div>
    </div>
</body>
</html>

下面是CSS:

#container {
  font-family: "Tahoma", sans-serif;
  max-width: 256px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  box-shadow: 2px 3px 50px grey;
}

#animal-info {
  max-width: 256px;
  padding: 8px;
  font-size: 15px;
  border: 1px solid lightgrey;
  border-radius: 5px;
}

#interesting-fact {
  font-style: italic;
}

#facts {
  list-style-type: none;
  margin-left: -40px;
}

Answer 1

你有两种方法可以做到这一点

首先，您可以标记 div 的第一个 p 子项并删除顶部填充

#animal-info {
  max-width: 256px;
  padding: 8px;
  font-size: 15px;
  border: 1px solid lightgrey;
  border-radius: 5px;
}

#animal-info p:first-child {
  margin-top: 0;
}

<div id="animal-info">
  <p>Cat</p>
  <p>Dog</p>
  <p>Fish</p>
</div>

或者您可以调整 div

的顶部填充

padding: top right bottom left;

希望这对您有所帮助:)

#animal-info {
  max-width: 256px;
  padding: 0px 8px 8px 8px;
  font-size: 15px;
  border: 1px solid lightgrey;
  border-radius: 5px;
}

<div id="animal-info" >
<p>Cat</p>
<p>Dog</p>
<p>Fish</p>
</div>

这将是您使用第一个子方法的示例的最终结果

#container {
  font-family: "Tahoma", sans-serif;
  max-width: 256px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  box-shadow: 2px 3px 50px grey;
}

#animal-info {
  max-width: 256px;
  padding: 8px;
  font-size: 15px;
  border: 1px solid lightgrey;
  border-radius: 5px;
}

#animal-info p:first-child{
margin-top: 0px;
}

#interesting-fact {
  font-style: italic;
}

#facts {
  list-style-type: none;
  margin-left: -40px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Building the Prototype</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="container">
        <h1 style="text-align: center; line-height: 0px">Snow Leopard</h1>
        <!-- photo credit: https://patrickwiltrout.wordpress.com/, image 
        taken by ? -->
        <img src="snow-leopard.jpg" alt="Snow Leopard" style="border-radius: 
        5px">
        <div id="animal-info">
            <p id="interesting-fact">Snow leopards are unable to roar 
            because they have different, less developed vocal chords than 
            other leopards 
            and big cats.</p>
            <ul id="facts">
              <li><strong><span>Scientific Name</span>:</strong> 
              <em>Panthera Uncia</em></li>
              <li><strong><span>Average Length</span>:</strong> <em>80-135 
              cm</em></li>
              <li><strong><span>Average Lifespan</span>:</strong> <em>10-12 
              years</em></li>
              <li><strong><span>Habitat</span>:</strong> <em>Highlands of 
              Central Asia</em></li>
            </ul>
            <p id="summary">Known for their elusive nature, snow leopards 
            are referred to by locals as “mountain ghosts.” As one of the 
            most mysterious species on the planet, the snow leopard remains 
            one of the least understood, and seen, of the big cats.</p>
        </div>
    </div>
</body>
</html>

如何使 <div> 周围的边框比第一个 <p> 少 "white space"？

How to make a border around a <div> have less "white space" above the first <p>?

html

css

whitespace

border