# HR styling broken in last update

**URL:** <https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676>\
**Category:** Help\
**Created:** [April 24, 2018, 6:12am UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676 "2018-04-24T06:12:45Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![enkimute](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/enkimute/32/500_2.png) [@enkimute](https://talk.observablehq.com/u/enkimute)\
**Post date:** [April 24, 2018, 6:12am UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/1 "2018-04-24T06:12:45Z")

</div>

Hi guys,

Just in case nobody has noticed - \<HR\> styling is broken in the last update.

Cheers,

S.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [April 24, 2018, 1:15pm UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/2 "2018-04-24T13:15:12Z")

</div>

This was an intentional change to increase the spacing around horizontal rules. How is it broken for you?

---

<div class="post-metadata">

**Author:** ![enkimute](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/enkimute/32/500_2.png) [@enkimute](https://talk.observablehq.com/u/enkimute)\
**Post date:** [April 24, 2018, 1:34pm UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/3 "2018-04-24T13:34:17Z")

</div>

There’s now an unusable large amount of space before and after them 😉

hehe I guess I’ll have to rework my styling - all good.

S.

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [April 24, 2018, 6:54pm UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/4 "2018-04-24T18:54:13Z")

</div>

This seems to me like it went way way overboard on the space. YMMV.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [April 25, 2018, 7:09pm UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/5 "2018-04-25T19:09:16Z")

</div>

it’s also quite too large for my taste, especially when I do something like

```auto
md`------
_Tech zone_`

```

and it results in a misalignment

![21](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/c2e3297c9ac8c907ffe51225667c5714eca691f1.png)

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [May 1, 2018, 7:43pm UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/6 "2018-05-01T19:43:04Z")

</div>

We’ve reduced the padding slightly (from 4em to 3em). If you want the caret \> to line up, try moving the horizontal rule to the preceding cell rather than the following cell.

```auto
md`That’s all for now, folks!

---`

```

```auto
md`## Appendix`

```

Which looks like:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/99c500fbf4db5b4b6737a670fbb8d00b2f9ee687.jpg)

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [May 2, 2018, 12:15am UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/7 "2018-05-02T00:15:35Z")

</div>

What is the reason for the gigantic amount of space? It seems like you expect hr to be used for “start a new unrelated book” instead of “give me a horizontal line”.

(Obviously this can be easily worked around by custom css on individual notebooks. So feel free to leave it however you folks prefer. As always, YMMV.)

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [May 2, 2018, 12:28am UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/8 "2018-05-02T00:28:59Z")

</div>

It’s for gestalt grouping, so that the content below the horizontal rule feels like its own group (a section), and the content above feels like a separate group, rather than a jumble of content with a rule mixed in.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [May 2, 2018, 12:31am UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/9 "2018-05-02T00:31:02Z")

</div>

Here’s an analogous usage in print (with similar padding?) to indicate a minor break in text:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/ab6de744c05cfe74dc0be5c66e0a966fd0f64e81.jpeg)

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [May 6, 2018, 8:06pm UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/10 "2018-05-06T20:06:11Z")

</div>

~\*cough\*~ We reduced the padding a little bit more to match normal paragraph padding. Thanks for your patience and feedback!

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [May 7, 2018, 3:17am UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/11 "2018-05-07T03:17:36Z")

</div>

One last question: Should a visible line for a default-rendered `hr` extend the full width of cells, or stay the width of the text block (`max-width: 640px` or whatever)? I can see an argument either way, and this probably depends on context, but often the latter looks better IMO.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [May 7, 2018, 8:43pm UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/12 "2018-05-07T20:43:48Z")

</div>

We considered both; if you allow full-bleed graphics, it feels weird to not have the rule extend the same full width.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 16, 2018, 12:40pm UTC](https://talk.observablehq.com/t/hr-styling-broken-in-last-update/676/13 "2018-07-16T12:40:42Z")

</div>

Looks like the rule has now completely disappeared (with `border:none`)

```auto
md`
----
`

```

shows only empty space. 😭
