How to reduce white space between two streamlit component

[rini_sinnan]

I am using a st.markdown to display custom color for the multiselect tags. However, I noticed that I have extra whitespace created(vertical) between two multiselect options. below is the code I am using.

import streamlit as st

st.set_page_config(layout="wide", page_title="Police Report Triaging")
st.subheader("Key information")
   col3, col4 = st.columns([0.5,2.5])
   person_list = ['Victim','Accused','Suspect','Witness'] 
   for person in person_list:
         st.markdown(
            f"""
            <style>
            span[data-baseweb="tag"]:has(span[title="{person}"]) {{
            background-color: #1E90FF !important;
            }}
            </style>
            """,
         unsafe_allow_html=True,
         )
   with col3:
      st.multiselect(
            label="Person",
            default = ["Victim"],
            options= person_list
      )
   with col4:
      st.markdown('#')
      st.write("**Name**: Samuel")

 col5, col6 = st.columns([0.5,2.5])   
   with col5:
      st.multiselect(
            label="Person",
            default = ["Accused"],
            options= person_list
      )
   
   with col6:
      st.markdown('#')
      st.write("**Name**: Bob")

[mathcatsand]

I saw your post on Stack Exchange and there. I’ll copy here for others:

Markdown with no visible content such as your CSS (<style>...</style>) will create whitespace. Your col3 and col4 are initialized first, then you write your CSS to the main body which goes under your columns. Hence, that first row shows first, then the whitespace (CSS), followed by the next row since col5 and col6 are initialized next.

The easiest solution is to make sure any “invisible markdown” elements are the last thing put on your page instead of mixed into the middle. This will make the bit of extra whitespace much less noticeable. This is what I usually recommend and is sufficient in many use cases.

If you have the need to truly have more control and mix in 0-height lines, you can set the height when rendering it on the page via st.components.v1.html. The caveat here is that although the HTML element will be 0 height, the gap between elements will cause the appearance of a double gap. (e.g. something visible, a gap, something 0-height, a gap, something visible)

This height issue is currently tracked in GitHub and I’ve written a JavaScript solution to get around it here: Components with height 0 still take up space · Issue #6605 · streamlit/streamlit · GitHub