行边框被背景遮挡？行间距与边框渲染异常问题求助

Hey there! Let's break down what's causing those two issues with your row elements and fix them up properly.

Problem 1: Margin not applying correctly between rows #

The most common culprit here is margin collapsing—a default CSS behavior where vertical margins of block-level elements merge together. For example, if your row elements have a margin-bottom: 10px and the next row has margin-top: 10px, the actual spacing between them will only be 10px, not 20px. Even worse, if the parent container doesn't have a border or padding to "break" the collapse, the top/bottom margins of the rows might collapse with the container's margins too.

Another possibility is if you're using a flex or grid container but haven't configured the spacing correctly—though flex/grid usually avoids margin collapsing, you might be relying on margin instead of the more reliable gap property.

Fixes for margin issues:

• Use gap instead of margin if you're using flex/grid: Set display: flex; flex-direction: column; gap: 12px; on the parent container, and you won't have to worry about collapsing margins at all.
• If sticking with block-level elements, add a tiny border or padding to the parent container (like padding-top: 1px or border-top: 1px solid transparent) to break margin collapsing. Then set a consistent margin-bottom on each row for spacing.

Problem 2: Border-bottom getting covered by the next row's background #

This happens because your row's height doesn't account for the border width. By default, CSS uses box-sizing: content-box, which means the height property only defines the content height—any border or padding adds to the total element height. So if your row is set to height: 50px with a border-bottom: 1px solid #000, the total height becomes 51px. If the next row sits directly below, its background will cover that extra 1px of border.

Your workaround of setting height: 49px works because it leaves space for the border, but that's a hack—let's fix it properly.

Fixes for border coverage:

• Add box-sizing: border-box; to your row elements. This makes the height property include the border and padding, so a height: 50px row with a 1px border will have 49px of content space and the border fits within the 50px total height. No more overlap!
• Avoid fixed heights entirely if possible: Use padding to control the vertical spacing of your rows (e.g., padding: 16px 0;), and the border will sit naturally at the bottom without being covered.

Optimal setup for your requirement (spacing + per-row borders) #

Here's a clean CSS example that addresses both issues:

/* Parent container */
.row-container {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Consistent row spacing, no margin collapse */
}

/* Row elements */
.row-item {
  border-bottom: 1px solid #ddd;
  padding: 12px 0; /* Vertical padding for content spacing */
  box-sizing: border-box; /* Ensures border doesn't add extra height */
}

If you need to use block-level elements instead of flex:

.row-container {
  padding-top: 1px; /* Breaks margin collapse with first row */
}

.row-item {
  margin-bottom: 12px; /* Row spacing */
  border-bottom: 1px solid #ddd;
  height: 50px; /* Fixed height if needed */
  box-sizing: border-box; /* Includes border in height */
}

Common configuration mistakes to check: #

1. Forgetting box-sizing: border-box, leading to border overflow and overlap.
2. Relying on vertical margins for block elements without accounting for margin collapse.
3. Using fixed heights without considering how border/padding affects total element size.

Hope this clears things up and gets your rows looking exactly how you want them!

内容的提问来源于stack exchange，提问作者Stephen Eckels