即使标题元素不存在，如何保留标题元素上方的空间？

3回答

达令说

首先，您需要小心您的代码：使用短横线命名 CSS 类名使用双倍空格进行缩进=设置属性时不要在周围添加空格现在，为了解决您的问题，我认为您需要做的就是重置 h2 元素的边距，以确保总高度 h2 + 边距小于您min-height为标题容器设置的高度。尝试一下，看看是否能解决您的问题：<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <link rel="stylesheet" href="style.css" />  </head>  <body>    <div class="my-component-wrapper">      <div class="my-container">        <div class="title">          <h2 class="head-title">This my Header</h2>        </div>      </div>      <div class="image">        <img          class="my-image"          src="https://via.placeholder.com/800x200"          alt=""        />      </div>    </div>  </body></html>/* style.css */body {  margin: 0;  padding: 0;  background-color: aqua;}.my-image {  width: 100%;}.title {  min-height: 60px;}.head-title {  margin: 0;  padding: 10px 0;}

冉冉说

设置标题的最小高度值，该值等于其行高值。这样，即使没有文本内容，标题空间也不会折叠。.headTitle {  min-height: 40px;  line-height: 40px; // set these values as you want, they just need to be equal}<div class = "myComponentWrapper"> <div class = "myContainer"  <div class = "Title">     <h2 class = "headTitle"> This my Header</h2>  </div> </div> <div class "image">  <img class="myImage" .......> </div></div>

慕虎7371278

可能有多种方法可以做到这一点。我将描述一个我认为简单的例子。使用条件边距您可以（通过检查）找出标题的高度加上标题和图像之间的间隙，然后您可以做的是将条件边距顶部应用于类来实现它.image。假设标题 + 间隙的高度为 40px，间隙本身为 20px，这就是您可以执行的操作。/* We give this margin-top by default. This includes header height + gap*/.image {  margin-top: 40px;}/* If there's myContainer div, which i am assuming only comes in when you have the header, we reduce that margin top to 20px to compensate for the header that exists.*/.myContainer + .image {  margin-top: 20px;}您还可以为标头元素指定特定的高度，然后此计算对您来说会变得更容易，而不是通过检查来查找所占用的垂直空间。注意：如果您没有为其指定特定高度，您还需要担心line-height元素的高度。h2在这种情况下，您需要添加计算的标题line-height和图像之间的间隙，然后使用它代替margin-top40px，如上所示。更新：如果我所做的假设是错误的，那么您就不能使用同级选择器来应用这些规则。在这种情况下，您需要更改标记以使标题和图像成为同级，或者可以选择更复杂的路线并使用 JavaScript（不推荐）。从语义上讲，如果可以的话，我希望将它们保留为兄弟姐妹（假设我可以控制标记生成）。在那种情况下，它看起来像这样。 <div class = "myContainer"  <div class = "Title">     <h2 class = "headTitle"> This my Header</h2>  </div>  <div class "image">     <img class="myImage" .......>  </div> </div>然后我会使用相同的同级选择器技巧来完成任务。JavaScript 方式如果您无法控制标记生成，则可以使用 JS 有条件地应用边距。// Rough example of what you can do assuming the height of header is 20px.// If you want to find out the height of header dynamically, use// ```header.offsetHeight``` and add that with 20px(assumed gap height) and apply that as margin top. const header = document.querySelector(".headTitle");const image = document.querySelector(".image");if(header) {  image.style.marginTop = '20px';} else {  image.style.marginTop = '40px';}