Goodbye padding?
Tags: webdev, css, programming
Published: 2022-04-12 15:20:36

Come on, it is twenty-twentysomething now, we really should know everything about accessibility, standards, usability, etc.. But how much time do we _usually_ spend with styling, and how much effort is taken away with the N+1 JavaScript framework released every Monday? 

## It is a pain..

...I read it on several pages, hear it from the community. That is why Tailwind CSS shines so bright, but rather learning all the tags of a CSS framework, people can actually do their own styling. So jump into our today's pick, the magical padding.

## The box model

I hope that everyone is familiar already with the box model, but let me attach a picture and the [docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model).

![The box model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfz9cujilbccus1pxmp8.png)

In CSS, usually everything has a box around it and it can be either _inline_ or _block_. When the browsers parses your HTML, it will logically organise these super fancy squares that a 2 year old can draw already.

## Give me some space

So you want to give your element a little free-space, not to look that _bad_. Okay, there is no good or bad, so just to add some spacing around it. I mean, with padding, your elements still be so close to each other like you to your commuting-fellows at 5 p.m. on the underground, but at least your arm will be _8px_ away from your coat sleeve on the inside. That is padding. Hope it helps during your next interview. :) 

## The problem arises when..

..when you only think about yourself. **Really**. Do you read from top-to-bottom/left-to-right? Awesome, than you are actually part of ~70% of the people from this point-of-view, but you miss out a few people, who reads from right-to-left/top-to-bottom, etc. 

## Example

Okay, enough from anecdotes, jump into the code. The following 
code shows what I was trying to point out.

- in the first paragraph, it works as intended
- on the other hand, the second (if the direction is _rtl_) we can immediately see the issue.

The padding is there, but.. :) 

You can say that use `padding: 0 8px` instead, but come-on...

{% codepen https://codepen.io/vazsonyidl/pen/bGajBYX %}

## Writing mode

You may come up with the idea, that instead of _rotating_ the title of your Y-axis on a diagram, you end up using the less-known _writing-mode_ CSS property. [Docs here](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode). 

In this case, what happens? With padding-left (which you originally set for to give some extra space for the 'beginning' of your element) is actually on the left-hand side now. 

Which is the bottom of your text, and the top is the left. 

What?! Let me demonstrate:

{% codepen https://codepen.io/vazsonyidl/pen/MWrBNQL %}


### There is even more

Things can get to be really complicated when you throw in some `text-orientation` as well - apart from `writing-mode`. I do not want to really go into the nitty-gritty details of all of these, MDN documentation is always there for edge cases.


### Conclusion

Rather than sticking to the well-know and easy-to-use `padding-left/right/top/bottom` take into consideration, that accessibility and usability is not just some buzz-words, but actual user-experience depends on you! :) 

There is always room for improvement, some minor one is `padding-inline`, but it's big brother `padding-block` is worth a mention as well.


Hope you enjoyed this article and I was able to show you something new. If you have anything to add, I welcome every comment.