LEMON BLOG

When you build websites (or even just browse them), "screen size" sounds like a simple concept. But the moment you start testing responsive layouts, things get messy fast. A page looks perfect on your desktop, then feels cramped on mobile. A button suddenly wraps into two lines. A canvas appears smaller than expected. And you're left guessing whether the problem is your CSS, the browser UI, the device pixel ratio, or something else entirely.

When building a website or designing a UI, we often get tangled up in the small details that control how elements are spaced. Four of the most commonly misunderstood CSS properties are gap, margin, line-height, and padding. At first glance, they all seem to "add space." But in reality, they do so in very different ways, and knowing how each works can make your designs look polished instead of messy. Let's break them down in a practical, easy-to-follow way with examples.

A Nostalgic Trip Back to 2006 Let's rewind the clock to 2006 — a time when the web was still finding its rhythm, Facebook wasn't quite the juggernaut it is today, and Joomla was the go-to CMS for building dynamic websites without starting from scratch. That year marked a pretty significant milestone in my web development journey — my first real experience working with CSS, PHP, and images to build custom templates (or "skins") for Joomla's Community Builder (CB) extension.