如何缩小段落间距？CSS边距调整无效的技术求助

Let's break down why your spacing adjustments aren't working and fix it step by step:

1. The Critical Issue: Duplicate id Attributes #

HTML requires unique id values across a page. You’ve used <div id="content"> three times—browsers will only apply CSS styles targeting #content to the first occurrence, ignoring the rest. That’s why tweaking margins on #content or .content_item wasn’t having consistent effects.

2. Default Browser Styles Are Adding Unwanted Spacing #

Elements like <h1> and <ul> come with built-in margin and padding from browser default stylesheets. Even if you set tight margins on .content_item, these default values will still create extra gaps you don’t want.

Fixes to Apply #

Updated CSS

/* Replace #content with .content (classes can repeat, ids can't) */
.content { 
  font: normal 100% Arial, Helvetica, sans-serif; 
  width: 680px; 
  margin: 0 0 10px 10px; /* Reduced bottom margin for tighter block spacing */
  float: left; 
} 
.content_item { 
  width: 680px; 
  margin: 0.2px 0; /* Fixed invalid .20px value to valid 0.2px; use 0 for no margin */
  margin-left: auto; 
  text-align: justify; 
  text-justify: inter-word; 
  line-height: 1.5; 
}
/* Reset default margins/padding for headings and lists inside content items */
.content_item h1 {
  margin: 0 0 8px 0; /* Adjust to control space below headings */
  padding: 0;
}
.content_item ul {
  margin: 0 0 8px 0; /* Adjust to control space below lists */
  padding-left: 20px; /* Keep list indentation without extra default padding */
}

Updated HTML

<!-- Use class="content" instead of duplicate id="content" -->
<div class="content"> 
  <div class="content_item"> 
    <h1>Specific project goals are</h1> 
    <ul> 
      <li>To build the big data and cloud computing research capacity at Winston-Salem state university.</li> 
      <li>To involve undergraduate students in cutting-edge research.</li> 
      <li>To enhance educational experiences for CS and IT majors at WSSU.</li> 
      <li>To expand the participation of underrepresented minority, specifically women, in STEM and support the nation’s efforts in building a robust STEM workforce.</li> 
    </ul> 
  </div> 
</div> 
<div class="content"> 
  <div class="content_item"> 
    <h1>Current Fundings</h1> 
    <ul> 
      <li>NSF, “Improving Research and Education of Big Data and Cloud Computing at Winston-Salem State University”, <strong>Award Number: 1600864</strong> $307,802, 2016 – 2019.</li> 
      <li>NSF, “Collaborative Research: Excellence In Research: Computational Framework and Data Science for Identification”, <strong>Award Number: 1900087</strong> $299,962, 2019-2022.</li> 
      <li>NSF, “Targeted Infusion Project: “Integrating Data Science into the Urban Studies and Sustainability Program”, <strong>Award Number: 1912214</strong> $249,825.00, 2019-2022.</li> 
    </ul> 
  </div> 
</div> 
<div class="content"> 
  <div class="content_item"> 
    <h1>Previous Fundings</h1> 
    <ul> 
      <li><b>UNC Research Cyberinfrastructure Colaboration Grant</b><br>Senior personnel: Dr. Debzani Deb, WSSU</li> 
      <li><b>WSSU RIP Award</b><br>“Utility-based Resource Provisioning of Big Data Applications on Cloud Environment”<br>Amount: $9,690.00<br>June, 2016 to November, 2017<br>PI: Dr. Debzani Deb, WSSU</li> 
    </ul> 
  </div> 
</div>

Key Takeaways: #

• Swapping id="content" for class="content" ensures your CSS applies to all three content blocks.
• Resetting h1 and ul margins/padding lets you fully control spacing without fighting browser defaults.
• The invalid .20px value is fixed to 0.2px (use 0 if you want zero margin between items).

Test these changes, and you’ll see the spacing between your content blocks and internal elements tighten up exactly as you want.

内容的提问来源于stack exchange，提问作者cherith kay