如何使用Bootstrap移除行间距？新手尝试自定义类无效求解决

Hey there, fellow Bootstrap newbie! Let's tackle that stubborn spacing between your two lines—trust me, we've all been there wrangling default styles that just won't cooperate.

First, let's break down why your custom nopadding and row-bottom-margin classes might not be working, plus easy fixes to eliminate that gap:

1. Default margins are probably the culprit #

Most likely, the spacing comes from built-in margins on block-level elements (like <p> tags, or even your ASP.NET Label controls if they render as block elements). Browsers add default margin-bottom to elements like paragraphs, and Bootstrap's base styles might be amplifying this too.

2. Use Bootstrap's built-in spacing classes (no custom CSS needed!) #

Bootstrap has a ton of utility classes made exactly for fixing spacing issues. Skip writing your own classes for now and try these:

• mb-0: Sets margin-bottom: 0 on an element (perfect for removing the gap below the first line)
• mt-0: Sets margin-top: 0 on the second line if there's still a top gap

Here's how to update your code snippet:

<div class="container">
  <div class="row">
    <div class="col-md-12" style="font-size:15px;padding-top:0px;font-family:Calibri;margin-left:60px;">
      <!-- Add mb-0 to strip bottom margin from the first line -->
      <div class="mb-0">
        Payment Received : <asp:Label ID="lblPayReceive" runat="server" CssClass="lblDeadln"></asp:Label>
      </div>
      <!-- Add mt-0 if the second line still has a top margin -->
      <div class="mt-0">
        Balance Payment : <asp:Label ID="lblBalancePay" runat="server" CssClass="lblDeadln"></asp:Label>
      </div>
    </div>
  </div>
</div>

If you're using <p> tags instead of <div>s, apply the classes directly to the paragraphs:

<p class="mb-0">Payment Received : <asp:Label ID="lblPayReceive" runat="server" CssClass="lblDeadln"></asp:Label></p>
<p class="mt-0">Balance Payment : <asp:Label ID="lblBalancePay" runat="server" CssClass="lblDeadln"></asp:Label></p>

3. Why your custom classes might not be working #

If you still want to use your own classes, double-check these:

• Your CSS has enough specificity to override Bootstrap's styles. Try adding !important (a quick fix for newbies, use sparingly long-term):

  .nopadding {
    margin: 0 !important;
    padding: 0 !important;
  }
  

• You're applying the class to the right element. If the spacing is from the text lines themselves, add nopadding to each line's container, not just the parent col-md-12.

4. Use browser dev tools to diagnose (your new best friend!) #

Right-click on the gap between the lines and select Inspect (or hit F12). This will show you exactly which element has the margin/padding causing the spacing. Look for highlighted areas in the "Styles" tab—you'll see which CSS rule is adding the gap, and can adjust it directly to test fixes.

内容的提问来源于stack exchange，提问作者chetan kambli