Skip to content

Comparison of inline scratchblocks with and without styling

Jump to bottom
ksDavidC edited this page Jun 2, 2026 · 4 revisions

CSS snippets can be used to improve the styling of inline scratchblocks. Results with and without the following CSS are shown in the table below (individual results will depend on the vault theme and context):

.scratchblocks-inline-rendered svg {
  display:inline-block;
  height:45px;               /* Set this to your desired overall height */
  margin-top: -15px;         /* Set this to pull text back into the line spacing */
  margin-bottom: -15px;      /* top and bottom */
  vertical-align: middle;    /* makes it even */
  width: auto;               /* necessary as well */
}
Type Without Styling With Styling
Simple inline Scratchblock text is small relative to the main text.

image 		Scratchblock text is closer to size of main text.

image
Plain list Text is small at all levels.
Overall Height increases.

image 		Text is smaller with more nesting.
Overall height stays the same.

image
Paragraph Line height varies according to height of image.

image 		Line height is consistent across lines.

image
Markdown used for testing

The following Markdown is useful for testing the effect of the CSS on line height and font size in a paragraph.

Level 1 `sb not <>` with lots of extra text and stuff to get onto next line. Level 2 `sb not <not <>>` with lots of extra text and stuff to get onto next line. Level 3 `sb not <not <not <>>>` with lots of extra text and stuff to get onto next line. Level 4 `sb not <not <not <not <>>>>` with lots of extra text and stuff to get onto next line. Level 5 `sb not <not <not < not < not <> > > > >` with lots of extra text and stuff to get onto next line. Level 6 `sb not <not <not < not < not < not <> > > > > >` with lots of extra text and stuff to get onto next line. Level 7 `sb not <not <not < not < not < not < not <> > > > > > >` with lots of extra text and stuff to get onto next line. 
Level 8 `sb not <not <not < not < not < not < not < not <> > > > > > > >` with lots of extra text and stuff to get onto next line. Level 9 `sb not <not <not < not < not < not < not < not <not <>> > > > > > > >` with lots of extra text and stuff to get onto next line.  Level 10 `sb not <not <not < not < not < not < not < not <not <not <>>> > > > > > > >` with lots of extra text and stuff to get onto next line. Level 11 `sb not <not <not < not < not < not < not < not <not <not <not <>>>> > > > > > > >` with lots of extra text and stuff to get onto next line. Level 12 `sb not <not <not < not < not < not < not < not <not <not <not <not <>>>>> > > > > > > >` with lots of extra text and stuff to get onto next line.

Styling comparison

Clone this wiki locally