Follow

Reminder that negative margins and paddings in CSS are a thing, and are quite useful. Some of my favourite uses follow.

More space between document sections:

```
h1, h2, h3, h4, h5, h6 {
margin: 2rem 0 -0.5rem;
}
```

When viewport width is small (mobile, etc.), <pre> stretches to the walls, and it's content is aligned with the rest of the document's text:

```
pre {
margin: 0 -0.5rem;
padding: 0.25rem 0.5rem;
}
```

torresjrjr.com/ast/style.css

torresjrjr.com/

Another recent example.

Indent all but the first line of your paragraphs. This is useful when you have long lines which, when wrapped, become hard to dicern. It's like a cross between a description list (<dl>) and a list (<ul>).

```
p {padding-left:2rem; margin:0; text-indent:-1rem}
```

Also, use <dl> and <time>!

Sign in to participate in the conversation
Qoto Mastodon

QOTO: Question Others to Teach Ourselves
An inclusive, Academic Freedom, instance
All cultures welcome.
Hate speech and harassment strictly forbidden.