How to adjust space between columns?

Using Streamlit
, ,
1

Subject: How to Control Gap Size for Specific Nested st.columns with CSS?

Hi Streamlit Community,

I’m building a chat application and I’m having trouble with some fine-grained layout control. I’m trying to reduce the gap between a specific group of columns that I’m using for action buttons, without affecting the layout of my main page columns.

My Goal

I want the action buttons (“Copy”, “Edit”, “PDF”) under each chat message to be very close together (almost no gap), while the main page columns maintain their standard spacing.

Here’s a visual of what I’m trying to achieve:

code Code

IGNORE_WHEN_COPYING_START

IGNORE_WHEN_COPYING_END

|------------------------------------| |---------------|
|         CHAT INTERFACE             | |   SIDEBAR     |
|                                    | |               |
|  [ Assistant Message...          ] | |               |
|                                    | |               |
|  [Copy][Edit][PDF] <--- These buttons should have a TINY gap.
|                                    | |               |
|  [ Another Message...            ] | |               |
|                                    | |               |
|  [Copy][Edit][PDF] <--- These too.  | |               |
|------------------------------------| |---------------|
  ^                                  ^
  But the main gap between the chat
  interface and sidebar should be normal.

What I’ve Tried

  1. gap=“small” : Using st.columns(…, gap=“small”) is the first step, but the “small” gap is still larger than I’d like for these buttons.

  2. Global CSS Targeting : I tried using CSS to target stHorizontalBlock, like this:

code Css

  1. IGNORE_WHEN_COPYING_START

IGNORE_WHEN_COPYING_END

div[data-testid="stHorizontalBlock"] {
    gap: 0.1rem !important;
}

The problem is that this is too broad. It correctly shrinks the gap for my action buttons, but it also shrinks the gap for my main page layout, which is not what I want.

Minimal Reproducible Example

Here is a simple script that demonstrates the problem. The CSS rule I’ve included affects all columns equally.

code Python

IGNORE_WHEN_COPYING_START

IGNORE_WHEN_COPYING_END

import streamlit as st

# This is the CSS I've tried, but it's too general.
# It affects the main columns and the button columns.
st.markdown("""
<style>
div[data-testid="stHorizontalBlock"] {
    gap: 0.2rem !important; /* This shrinks ALL gaps */
}
</style>
""", unsafe_allow_html=True)


st.header("My App Layout")

# --- Main Page Layout ---
# I want the gap between these two columns to be the default Streamlit gap.
main_col1, main_col2 = st.columns([2, 1], gap="large")

with main_col1:
    st.subheader("Chat Interface")
    st.info("This is an example assistant message.")

    # --- Nested Columns for Action Buttons ---
    # I want the gap between THESE buttons to be almost zero.
    st.write("Action Buttons:")
    # Using gap="small" is not small enough for my design.
    btn_cols = st.columns([1, 1, 1, 8])
    
    with btn_cols[0]:
        st.button("Copy", use_container_width=True)
    with btn_cols[1]:
        st.button("Edit", use_container_width=True)
    with btn_cols[2]:
        st.button("PDF", use_container_width=True)

with main_col2:
    st.subheader("Related Info")
    st.warning("The global CSS rule made the gap between the main columns too small.")


st.markdown("---")
st.header("The Question")
st.write(
    "How can I write a CSS selector that targets **only** the nested columns used for the "
    "action buttons (`btn_cols`) without affecting the main layout columns (`main_col1`, `main_col2`)? "
    "I'm looking for a reliable way to create different gap sizes for different `st.columns` groups."
)

My Question

What is the correct and most reliable way to target only the columns used for the action buttons, so I can set their gap to a very small value (e.g., 0.1rem) without affecting any other columns on the page?

I’d appreciate any advice on the best practice for this kind of specific styling.

Thanks so much for your help
Babaei

2

Have you tried using the new container parameters in 1.48 which allow the creation of horizontal flex containers?

This is probably the exact use case for this solution and the docs show an example which is exactly like you need. Check out example 5 here.

1 Like
3

In the end I couldn’t reduce the space between columns, but your answer honestly saved me
thank you