如何通过HTML/CSS仅移除指定区域行间距（保留标签padding）

Absolutely, using a custom CSS class is the perfect way to isolate spacing changes to only your specified area—no impact on other pages or sections of the current page. Here's a step-by-step implementation that keeps your tag padding intact while pulling -- lines directly below their preceding text:

1. Structure Your HTML with Targeted Classes #

First, wrap the entire section you want to modify in a container class (e.g., .tight-spacing-container). Then add a class (e.g., .tight-line) to each line that starts with --:

<!-- Only this container will have adjusted spacing -->
<div class="tight-spacing-container">
  <p class="regular-text">Your preceding text here</p>
  <p class="tight-line">-- This line sits flush below the text above</p>

  <p class="regular-text">Another block of content</p>
  <p class="tight-line">-- Another tight line right below</p>

  <!-- Regular elements in this container keep normal spacing -->
  <p class="regular-text">This paragraph uses your default line spacing</p>
</div>

<!-- Outside the container, everything stays as is -->
<p>This page content remains unaffected by the spacing changes</p>

2. Write the CSS to Adjust Spacing #

We’ll use margin (not padding) to tweak the space between elements—padding controls internal space inside your tags, while margin handles the external gap between elements. This ensures your tag padding stays intact.

/* Scope all styles to our target container */
.tight-spacing-container {
  /* Optional: Add container styles like border/padding if needed */
  padding: 1rem;
  border: 1px solid #e0e0e0;
}

/* Keep padding intact for all elements in the container */
.tight-spacing-container .regular-text,
.tight-spacing-container .tight-line {
  padding: 0.5rem; /* Match your existing tag padding here */
}

/* Remove bottom margin from text above a tight line */
.tight-spacing-container .regular-text {
  margin-bottom: 0;
}

/* Remove top margin from the tight line itself */
.tight-spacing-container .tight-line {
  margin-top: 0;
}

/* Optional: Restore normal spacing for regular lines after tight lines */
.tight-spacing-container .tight-line + .regular-text {
  margin-top: 1rem; /* Match your default line spacing here */
}

How It Works #

• The container class .tight-spacing-container ensures all our spacing rules only apply to elements inside this section.
• By setting margin-bottom: 0 on the preceding text and margin-top: 0 on the -- line, we eliminate the gap between them.
• Your tag padding remains fully preserved because we’re only modifying margin values.
• The optional last rule ensures regular lines after a tight line go back to your default spacing.

Compatibility #

This approach works in all modern browsers (Chrome, Firefox, Safari, Edge) and even older ones like IE7+, since we’re using basic CSS selectors that have broad support.

内容的提问来源于stack exchange，提问作者Brad Anderson