网页开发：header与text间未知间隙问题求助

这个间隙的根源是块级元素中文本的默认行高和浏览器的默认排版规则——即使你没手动设置margin，文本的line-height会让块级元素的高度超出文字实际范围，相邻块之间就会出现视觉上的间隙。

解决方案 #

方法1：用Flex布局统一控制间距（推荐） #

给.content添加垂直方向的Flex布局，通过gap精准控制所有子元素的间距：

.content {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 可根据需求调整间距大小 */
  flex: 1; /* 让内容区域占满modal的剩余空间，避免布局挤压 */
}

这种方式能彻底避免默认排版带来的问题，还能统一管理header、text和按钮之间的间距。

方法2：直接消除行高与默认margin的影响 #

如果不想修改布局方式，也可以通过调整行高和清除margin来解决：

.header{
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1; /* 让行高等于字体大小，消除额外垂直空间 */
}

.text{
  margin-top: 0;
  line-height: 1.4; /* 保持文本可读性的同时控制行高 */
}

修改后的完整代码 #

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

html, body {
    height: 100%;
}

body {
    font-family: Roboto, sans-serif;
    margin: 0;
    background: #aaa;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    background: white;
    width: 480px;
    border-radius: 10px;
    box-shadow: 2px 4px 16px rgba(0,0,0,.2);
    padding: 15px;
    display: flex;
    gap: 15px;
}

.icon {
    color: royalblue;
    font-size: 26px;
    font-weight: 700;
    background: lavender;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header{
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}

.text{
    line-height: 1.4;
}

.close-button {
    background: #eee;
    border-radius: 50%;
    color: #888;
    font-weight: 400;
    font-size: 16px;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    padding: 0;
}

button {
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
}

button.continue {
    background: royalblue;
    border: 1px solid royalblue;
    color: white;
}

button.cancel {
    background: white;
    border: 1px solid #ddd;
    color: royalblue;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

HTML代码 #

<div class="modal">
  <div class="icon">!</div>
  <div class="content">
      <div class="header">Are you sure you want to do that?
          <button class="close-button">✖</button>
      </div>
      <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
      <div class="buttons">
          <button class="continue">Continue</button>
          <button class="cancel">Cancel</button>
      </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者MInH THiỆn