When we speak about text it’s enough to consider the line-height. The first, content, differs from element to element. The vertical components of the last 3 are included in the 6 properties above and work the same for any element on our page. The image below of the box model shows 4 parts of each box - content, padding, border, and margin. With non-textual elements we’ll think more about the height of the element.

I mentioned 5 properties in my previous post that we need to pay attention to and today I’ll add a 6th. Using that baseline unit we want the vertical measurements in our design to be some multiple of it to ensure that everything falls on a baseline. Mostly this will be text and the baseline unit is the line-height of your text. The basic idea behind a baseline grid is to align elements along the vertical.

If you haven’t read the previous post you may want to take a look now.įirst let’s review a few things. I touched on this in the previous post, but I’ll try to offer more detail here. I’ve added an image, a table, and a form to the demo and will walk through each below. It’s a fair point and I thought I’d extend my previous post and demo to include some non-textual elements. In a comment Raul wondered why most articles about baseline grids focused on textual elements while not mentioning non-textual elements such as forms. A few weeks ago I offered some tips for setting up a baseline grid.

Textual elements