Now I'll have padding both ways

I have heard Douglas Crockford say CSS is an abomination. Or something to that effect. We can’t argue with the man. He is the authority on the subject and knows what he is saying.

However, for the rest of us hobbyists, CSS is a boon. A magic wand, if you will, for turning ugly1 web pages into something better. Better for reading, printing, or other things like partially extracting content. I do it all the time because there are a gazillion ugly web pages that could have been far more beautiful.

I have been dabbling with CSS for a long time to revamp the look and feel of web pages, which otherwise are illegible to my eyes. My eyes don’t like just any font family, size, or style. And don’t get me started on the clutter on these web pages. You would have to excavate the content that matters.

One of the properties that I use for tinkering is padding. More often than not, I find myself wanting to change just the horizontal or the vertical padding.

As you can see from the syntax for padding below, there isn’t exactly one to exclusively control either the horizontal or the vertical padding.

padding: 1em;						/* Apply to all four sides */

padding: 5% 10%;				/* top and bottom | left and right */

padding: 1em 2em 2em;		/* top | left and right | bottom */

padding: 5px 1em 0 2em;	/* top | right | bottom | left */

What’s the problem with the syntax?

Problem no more! I am ashamed, surprised, and delighted today that I found two properties for individually controlling horizontal and vertical paddings.

Meet:

Let me explain my emotions:

NOTE:

The padding properties above work in tandem with the writing-mode property. The web pages I typically deal with do not specify a writing-mode property defaulting to the value horizontal-tb. So, my mind automatically maps padding-inline to horizontal padding (left, right) and padding-block to vertical padding (top and bottom).


Some tools related to this post that I use and love:


  1. I can’t tolerate the home pages of true geniuses like Richard Stallman and Bjarne Stroustoup. They deserve a facial uplift for me to enjoy reading them. It is one of my use cases for dabbling with CSS. ↩︎