如何缩小HTML中Service Name与Status的间距以匹配另一组行间距？

我需要将布局调整为目标样式：让“Service Name（Pirate Service）”与“Status（Proposed）”之间的间距，和“API Name（Get All Loot）”与“Resource Name（Pirates）”之间的间距相等。但实际呈现效果中前者间距过大，请问如何缩小该间距？

以下是我的TypeScript代码及CSS代码：

TypeScript代码 #

import "./Description.css";

interface DescriptionProps {
  name: string;
  service: string;
  resource: string;
  status: string;
}
export const Description = ({name, service, resource, status,}: DescriptionProps) => {
  return (
    <div>
      <div className="name-service-container">
        <h1>
          <span className="names">{name}</span>
        </h1>
        <h4>
          <span className="services">{service}</span>
        </h4>
      </div>

      <br />

      <div className="resource-status-container">
        <p>
          <span className="resources">{resource}</span>
        </p>
        <p>
          <span className="status">{status}</span>
        </p>
      </div>
    </div>
  );
};

CSS代码 #

.resources {
  display: inline;
  float: left;
  font-style: italic;
  clear: left;
}

.names {
  display: inline;
  float: left;
}

.services {
  float: right;
  bottom: 0;
}

.status{
  float: right;
  top:0;
}

.resource-status-container{
  margin-right: 30px;

}

.name-service-container{
  margin-right:30px;
}

解决方案 #

问题根源在于float布局难以精准控制垂直间距，改用Flexbox布局可以彻底解决这个问题，同时让结构更稳定：

1. 优化TypeScript组件结构（简化不必要的嵌套span）：

import "./Description.css";

interface DescriptionProps {
  name: string;
  service: string;
  resource: string;
  status: string;
}
export const Description = ({name, service, resource, status,}: DescriptionProps) => {
  return (
    <div className="description-wrap">
      <div className="name-service-container">
        <h1 className="names">{name}</h1>
        <h4 className="services">{service}</h4>
      </div>

      <div className="resource-status-container">
        <p className="resources">{resource}</p>
        <p className="status">{status}</p>
      </div>
    </div>
  );
};

2. 更新CSS样式：

.description-wrap {
  margin-right: 30px;
}

/* 统一两组容器的布局规则 */
.name-service-container,
.resource-status-container {
  display: flex;
  justify-content: space-between; /* 左右元素自动两端对齐 */
  align-items: flex-end; /* 让不同高度的元素底部对齐，消除视觉差 */
  margin-bottom: 18px; /* 这就是你要的两组之间的垂直间距，可按需调整数值 */
}

/* 清除标题和段落的默认外边距，避免额外间距干扰 */
.names, .services, .resources, .status {
  margin: 0;
}

.resources {
  font-style: italic;
}

调整后，两组内容的垂直间距由margin-bottom统一控制，左右元素的对齐方式也更规整，完全可以实现你要的间距相等效果。

内容的提问来源于stack exchange，提问作者Henry Bai