行边框被背景隐藏？

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 在下一行项目的背景后面渲染，如果我手动将下一行项目向下移动 1 像素或将样式设置为 49 像素的高度，它就会显示出来。

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

Answer 1

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

1. Margin - 出现时，包括距下一个元素顶部的边距 px 以实现间距

   第一个元素 - 前 50 像素
   第二个元素 - 顶部 50px + 1px 边框 + 10px 边距 = 61px;
   第三个元素 - 61 + 51 + 10px 边距 = 122px

2. 高度 = 内容的高度。 （边框和填充不包括在计算中。），因此元素的高度是 50 + 边框底部 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 会采用间距和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>