Did you ever encounter the problem that the space between a text block and some other element does not seem right? For example, although we've added the same `mt-4` to a text block and some images, the space between text and image looks much larger than the space between two images. So instead of `mt-4` we try `mt-3`, but it just doesn't work out. This is because the same margin can look visually different if it separates text from some other element or two none text elements because the line height of the text block adds additional spacing...
Years of writing and maintaining CSS code and remarks by Mark Dalgleish and Adam Wathan, along the same line, lead me to conclude that the spacing between HTML elements should be determined by their parent element in almost all cases.
In this article, we explore how to create a simple carousel with only HTML and CSS. Recently, when I was reminded of the existence of the CSS property scroll-snap, I thought it should be easy to create a simple carousel component with it. After outlining a quick proof of concept in a simple HTML file, my assumption was confirmed...
In my experience, customers love sticky headers. And indeed, they prove to be very useful in certain situations. But there are also terrible implementations of this pattern out there. And I cannot blame the developers who created them. Getting sticky headers right is harder than you might think...
A long time ago, there was practically no way around the HTML <table> element for creating complex layouts on the web. Fortunately, those days are long gone. Nowadays, we only use the <table> element as it should be used: to display tabular data. However, only recently, I was reminded again that styling tables is not as easy as one might think...