DEV Community

Cover image for An Apple A Day...
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.com

10

An Apple A Day...

They say an apple a day keeps the doctor away... But does that apply to web development and CSS, too? Today’s cartoon tried to answer that question:

Cartoon with the title 'They say an apple a day keeps the doctor away... but the CSS Developer :has more faith in a margin'. A man doing yoga, his personal space highlighted with a border. There's a bubble with the CSS code: ':has(.doctor) #me { margin: 15vmin; }' And at a distance, there's an angry doctor who can't get closer.

As the cartoon is coded in HTML and CSS, you can check the source code at this live demo on comicss.art.

Alternative

I also coded an alternative version, a bit more educational, highlighting the parts of the box model using the same drawing (hopefully, the personal space idea is clear... I know it may not be obvious...)

'An apple a day may keep the doctor away... But a CSS developer trusts the box model'. A cartoon with a man doing yoga with a dashed line showing his personal space, a bubble with the CSS code ':has(.doctor) #me { margin: 15vmin; }', and an angry doctor complaining he can't get closer. The person doing yoga is labeled as 'content', the space between the person and the dashed line is 'padding', the dashed line is labeled 'border', the space between the dashed line and the doctor is 'margin'

Hopefully, it is clear. Although I must admit, the dashed line marking the personal space is a bit weird, and it can be confusing (as it may seem like it’s a force field and the margin is actually between the person and the border instead of between the border and the doctor.)

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
ant_f_dev profile image
Anthony Fung

Nice! A really fun way to illustrate CSS properties.

The alternative ending to the apple phrase might also be: An Apple a day, ends up being very expensive - those MacBooks aren't cheap :)

Collapse
 
bellatrix profile image
Sakshi

haha, lovely

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay