Remove whitespace between st.markdown

🧩 Custom Components
1

Hi !
I’m using streamlit expander, in which I have a some text displayed with st.write(), then some text displayed with st.markdown(), then finally an image. My problem is that between the 2nd markdown and the elements around it, there is a huge amount of space. It should look like this:

"This app aims at providing a simple user interface to do some stuff "

But instead looks like this :
"

This app aims at providing a simple user interface to do some stuff

                    "

I understand from some other streamlit community posts that this is due to CSS whitespace. Do you know how I could vanish, or reduce the size of, this whitespace?

Here is my code (I’m looping on a json file called “apps”: one app = one expander) :


padding_top = 0
padding_bottom = 0

for k in range(len(apps)):
    with st.expander():
         st.write("**Users:** ", apps[k]['desk'][0])
         st.write("**Category:** ", apps[k]['category'][0])

        # paste a text with a fixed size for all expanders using st.markdown
        description = utils.constrain_text(160, apps[k]['description'])
       st.markdown(
                  f"""
                         <div class="description" style="white-space: pre-wrap;margin-bottom: 1px; padding: 0;padding-top: {padding_top}rem;
                    padding-bottom: {padding_bottom}rem;">
                                                 <h1 style="font-size: 15px; margin: 0; font-weight: normal;padding: 0;padding-top: {padding_top}rem;
                    padding-bottom: {padding_bottom}rem">{description}</h1>
                                            </div>
                                            """,
                                                                            unsafe_allow_html=True
                                )
        st.image(Image.open(filepath))
2

That is because the newlines in your html.

3

Hi @ClaraBird

Yes, you can use CSS styling to modify the spacing between the elements (the key lies in identifying the element names for selection, which is shown in this tutorial video https://www.youtube.com/watch?v=gr_KyGfO_eU).

If using 0 and nothing changes, try using a negative number.

Hope this helps!