行背景隐藏的背景？

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. 如果我将下一行项目手动向下移动1px，则borderBottom将在后一行项目的背景后面渲染，或者将样式设置为显示高度为49px。

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

Answer 1

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

1. 保证金 - 显示，将边距px包含在下一个元素的顶部以进行间距

   第一元素 - 前50px
   第二个元素 - 前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
}

<强>解释

删除绝对位置和顶部位置，然后只有空格将采用间距和边框底部

选项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>