css - 背景隐藏行边框？

Question

feed_page: {
    margin: 'auto'
  },

  feed_list: {
    margin: 'auto'
  },

  feed_item: {
    textAlign: 'center',
    backgroundColor: '#fff',
    borderBottom: '1px solid #e0e0e0',
    margin: '10px'
  }
  // ...
  <
  div style = {
    this.stylesheet.feed_page
  } >
  <
  List style = {
    this.stylesheet.feed_list
  }
height = {
  1400
}
rowCount = {
  this.testPosts.length
}
rowHeight = {
  50
}
width = {
  800
}
rowRenderer = {
  this.b_listItemRender
}
/> <
/div>

listItemRender({
  index, // Index of row
  isScrolling, // The List is currently being scrolled
  isVisible, // This row is visible within the List (eg it is not an    overscanned row)
  key, // Unique key within array of rendered rows
  parent, // Reference to the parent List (instance)
  style
}) {
  style = {
    ...style,
    ...this.stylesheet.feed_item
  }

  return ( <
    div key = {
      key
    }
    style = {
      style
    } > {
      this.testPosts[index]
    } <
    /div>
  );
}

这导致(我手动关闭了 1 行的背景):

两个问题:

1. 未遵守行与行之间的边距

2. borderBottom 在下一行元素的背景后面呈现，如果我手动将下一行元素向下移动 1px 或将样式设置为 49px 的高度，它就会显示出来。

我搞砸了什么？我需要在行元素之间有一个空格，每个元素都有一个边框

Answer 1

要达到预期结果，请使用以下选项

1. margin - 出现，包含到下一个元素顶部的 margin px 用于间距

   第一个元素 - 前 50 像素
   第二个元素 - top 50px + 1px border + 10px margin = 61px;
   第三个元素 - 61 + 51 + 10px 边距 = 122px

2. 高度 = 内容的高度。 (边框和填充不包括在计算中。)，因此元素的高度是 50 + border bottom 1px ，所以下一个元素必须从顶部 51 开始，第三个元素顶部 102 px (51+51)

   <

代码示例- https://codepen.io/nagasai/pen/YaXVox

<div style="width:auto;height:250px;max-width:800px;max-height:250px;overflow:hidden;position:relative;border:1px solid blue;">
  <div style="width:100%;height:50px;max-width:800px;max-height:250px;overflow:hidden;position:absolute;top:0;margin:10px;border-bottom:1px solid black;background-color:red">i'm a post</div>
  
  <div style="width:100%;height:50px;max-width:800px;max-height:250px;overflow:hidden;position:absolute;top:61px;margin:10px;border-bottom:1px solid black;background-color:red">i'm a second post</div>
  
  <div style="width:100%;height:50px;max-width:800px;max-height:250px;overflow:hidden;position:absolute;top:122px;margin:10px;border-bottom:1px solid black;background-color:red">i'm third post</div>
</div>

选项 2: 解决的另一个选项是使用下面的 CSS 创建类，

.row{
width:100%;
height:50px;
max-width:800px;
max-height:250px;
overflow:hidden;
margin:10px;
border-bottom:1px solid black;
background-color:red
}

解释:

移除 position absolute 和 top ，那么只有 margin 会占用 spacing 和 border-bottom

选项 2 的代码示例 - https://codepen.io/nagasai/pen/aYOwNm?editors=1100

.row{
width:100%;
height:50px;
max-width:800px;
max-height:250px;
overflow:hidden;
margin:10px;
border-bottom:1px solid black;
background-color:red
}

<div style="width:auto;height:250px;max-width:800px;max-height:250px;overflow:hidden;position:relative;border:1px solid blue;">
  <div class="row">i'm a post</div>
  
  <div class="row">i'm a second post</div>
  
  <div class="row">i'm third post</div>
</div>