display:block stacks and fills width; inline flows in text and ignores width/height; inline-block flows inline but accepts box dimensions — perfect for buttons and chips. Changing display is how you make a span behave like a box.
display:block stacks and fills width; inline flows in text and ignores width/height; inline-block flows inline but accepts box dimensions — perfect for buttons and chips. Changing display is how you make a span behave like a box.
<!doctype html><html><head><meta charset="utf-8">
<style>.chip{display:inline-block;padding:6px 12px;background:#b388ff;color:#06040d;border-radius:999px;margin:3px}</style></head><body style="background:#06040d"><span class="chip">one</span><span class="chip">two</span></body></html>