How to get box for modules?

[enoryw]

How to get modules to have "boxes" with the text inside like this?

Actually, I'm looking for ways to make the modules more visually distinct from each other without increasing height of the bar or the width of the modules. And preferably without making the text smaller or increasing the space between modules. It should be quite subtitle too.

I've been using border-right but it kind of looks ugly with a grid-like look (it might look better if it didn't take up the whole height).

Much appreciated.

P.S. I currently have #memory.high { background-color: #FA5F55; color: #000000; } to color the module's background when memory usage is high. This covers the whole background--is it possible to not cover the text portion and only the icon portion? It makes it hard to read the text even if I change the text color.

[TheElevatedOne]

You use the margin-right and margin-left CSS modifier.

Margin specifies the space between elements. Imagine two elements next to each other, ex.:

element1 {
}
element2 {
}

Element 2 want to be further apart from Element 1 and it pushes it 5 pixels to the left, which can look like:

element1 {
}
element2 {
  margin-left: 5px;
}

or

element1 {
  margin-right: 5px;
}
element2 {
}

---

In my own waybar config, I can show this like this:

The right arrow is a module with this css:

#custom-rp-lock {
  color: @lock;
  font-size: 20px;
}

If I change it to

#custom-rp-lock {
  color: @lock;
  font-size: 20px;
  margin-left: 5px;
}

it looks like

---

This way you can push apart the elements, and to workaround the empty space between elements to have some background, you can group elements via the Group Module and assign CSS to it.