From Negative Margins to Clean Layouts: How I Stopped Fighting CSS

Hi everyone! 👋

I'm Lilian, a frontend developer transitioning from Agricultural Science. This week, I launched my first professional portfolio hub, and I want to share a specific lesson I learned about CSS spacing that changed how I approach layouts.

The Problem: Forcing Things to Fit

When I was styling my portfolio, I noticed some elements felt too far apart. My quick fix? Negative margins.

I wrote code like this:

blockquote {
    margin-top: -40px; /* Pulling it up by force */
}

On my desktop screen, it looked perfect. But when I checked it on mobile, things started overlapping unpredictably. I was essentially "pulling elements upward by force" instead of letting them flow naturally.

The Realization

I realized that negative margins are often a shortcut that fights the document flow. They might solve a visual problem in one specific view, but they break easily when the screen size changes.

The Solution: Working With the Flow

Instead of forcing elements to move, I learned to adjust the natural spacing of the elements around them.

The "pro move" I discovered:

• Reduce the margin-bottom of the element above.
• Or reduce the margin-top of the element below.

So instead of this:

/* ❌ The old way */
blockquote {
    margin-top: -40px;
}

I did this:

/* ✅ The new way */
.intro-section {
    margin-bottom: 10px; /* Gentle spacing */
}


blockquote {
    margin-top: 10px; /* Natural flow */
}

The Result

My layout is now:

• ✅ Stable on all screen sizes.
• ✅ Easier to maintain.
• ✅ Predictable when I add new content.

The Takeaway

If you find yourself using negative margins to fix spacing, pause. Ask yourself: Am I fighting the flow?

Often, the solution isn't to pull harder, but to adjust the space around the elements gently.

You can see the final result of this lesson in my live portfolio here:
🔗 Web Development Portfolio Hub

I'm still learning, but sharing these small wins helps me remember them. Thanks for reading!