Remove or reduce spaces between elements

[edsaac]

@edsaac

[data-testid=column]:nth-of-type(1) [data-testid=stVerticalBlock]

Sure, so this changes the gap between elements in the first column to 0rem. The logic behind it is that it looks for all the column elements in the page ([data-testid=column]), then picks the first one (:nth-of-type() selector), and then it selects the [data-testid=stVerticalBlock] element, which is the one that has the gap property. Notice that gap: 0rem does not apply to the checkboxes but to everything placed in that first column, so it should apply for selectboxes or whatever you put in there.

Here is a better explanation on how to find those tags and target particular css properties on an page:

CSS hacks

CSS hacking tut Your most important tool in this will be the Web Inspector. It’s usually F12 on Windows (I don’t know on Mac) otherwise you should find it inside the settings of your web browser (for Firefox it will be More tools > Web Developer tools). You should then see the HTML page of your Streamlit app. [image] Let’s suppose you want to edit the slider color with the CSS hack. Then you’ll need to find a way to select this slider using CSS Selection. You can try and use the inspector t…