title: How to remove bottom default padding from List view in SwiftUI
body: <p>I'm trying to remove the bottom padding on a List view when another view is being defined after it so that the List view is sitting on top of the other one. Not overlaying. There seems to be some extra space created from the List and I'm not sure how to remove that to achieve what I want. Here's what I have.</p>
  <pre class="lang-swift prettyprint-override"><code>List {
      ForEach(0...2, id: \.self) { color in
          Text(&quot;\(color)&quot;)
      }.listRowInsets(EdgeInsets())
  }
  
  Rectangle().fill(Color.red)
  </code></pre>
  <p>Here's what that looks like. You can see that there is a gap between row 2 and the red rectangle. What I'd like is for the boundaries of those two views to be adjacent to each other.</p>
  <p><a href="https://i.stack.imgur.com/GEEdn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GEEdn.png" alt="layout" /></a></p>
  <p>EDIT: I've tried embedding the code in a VStack but that doesn't remove the white gap we see below.</p>
  <p>Looking at this <a href="https://stackoverflow.com/questions/64022802/how-to-remove-bottom-padding-of-list-and-scrollview-in-swiftui">answer</a>, it seems like wrapping the list in a VStack would remove the gap but it’s not from what we can see here?</p>
  <pre class="lang-swift prettyprint-override"><code>VStack(spacing: 0) {
      VStack(spacing: 0) {
          List {
              ForEach(0...0, id: \.self) { number in
                  Text(&quot;1&quot;)
                      .listRowBackground(Color.blue)
                  Text(&quot;2&quot;)
              }.listRowBackground(Color.gray)
          }
      }
  
      VStack(spacing: 0) {
          HStack(spacing: 0) {
              Rectangle()
                  .fill(Color.red)
              Rectangle()
                  .fill(Color.red)
          }
          HStack(spacing: 0) {
              Rectangle()
                  .fill(Color.red)
              Rectangle()
                  .fill(Color.red)
          }
      }
      .aspectRatio(1.0, contentMode: .fill)
  
      VStack {
          List {
              Text(&quot;1&quot;)
                  .listRowBackground(Color.purple)
              Text(&quot;2&quot;)
                  .listRowBackground(Color.pink)
              Text(&quot;3&quot;)
                  .listRowBackground(Color.blue)
              Text(&quot;4&quot;)
                  .listRowBackground(Color.orange)
          }
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/DU8BB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DU8BB.png" alt="enter image description here" /></a></p>
  <p>I've tried multiple variations of VStacks with spacing equals 0 and haven't found how to remove that gap that's created by the List view. If there are more rows added, it begins to fill up but I'm trying to just have two rows with no white gap sit above the red rectangle.</p>
  <p>We can see the List view highlighted below includes that gap.</p>
  <p><a href="https://i.stack.imgur.com/2C5aZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2C5aZ.png" alt="enter image description here" /></a></p>