这是我的标题和图片的picture。如您所见，标题和蓝线上方有空格。但是，如果没有标题，则标题上方的空间消失，图像现在更靠近蓝线 example here。即使没有标题，我怎样才能保留标题上方的空间？ 基本上，我不希望我的图片靠近蓝线，即使没有标题，我也希望该空间保持原位。
我尝试在标题类上应用min-height，但仍然没有空格，当没有标题时
这是我的 HTML：
<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>
【问题讨论】：
标签： javascript html css sass
首先，你需要小心你的代码：
= 周围添加空格现在，为了解决您的问题，我认为您需要做的就是重置 h2 元素的边距，以确保 h2 + 边距的总高度小于您为标题容器设置的 min-height。
试试这个，看看它是否能解决你的问题：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<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;
}
【讨论】：
可能有多种方法可以做到这一点。我将描述一个我觉得简单的。
您可以找出（通过检查）标题的高度以及标题和图像之间的间隙，然后您可以将条件边距顶部应用于.image 类来实现它。
假设 header + gap 的高度是 40px，而 gap 本身是 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;
}
你也可以给你的标题元素一个特定的高度，然后这个计算对你来说会变得更容易一些，而不是通过检查来找到占用的垂直空间。
注意：如果您没有为其指定特定高度，您还需要担心h2 元素的line-height。在这种情况下，您需要添加计算出的line-height 以及标题和图像之间的间隙，然后将其用作margin-top 而不是如上所示的 40px。
更新：
如果我所做的假设是错误的，那么您就不能使用兄弟选择器来应用这些规则。在这种情况下，您需要更改标记以使标题和图像作为兄弟姐妹，或者可能选择更复杂的路线并使用 JavaScript（不是首选）。
从语义上讲，如果可以的话，我希望将它们保留为兄弟姐妹（假设我可以控制标记生成）。在那种情况下，它看起来像这样。
<div class = "myContainer"
<div class = "Title">
<h2 class = "headTitle"> This my Header</h2>
</div>
<div class "image">
<img class="myImage" .......>
</div>
</div>
然后我会使用相同的兄弟选择器技巧来完成任务。
如果您无法控制标记生成，则可以使用 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';
}
【讨论】：
为您的标题设置与行高值相等的最小高度值。这样，即使没有文字内容，标题的空间也不会塌陷。
.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>【讨论】：