# Reducing line spacing for span cat

**URL:** <https://support.prodi.gy/t/reducing-line-spacing-for-span-cat/5747>\
**Category:** Uncategorized\
**Tags:** front-end, spancat\
**Created:** [June 27, 2022, 6:33pm UTC](https://support.prodi.gy/t/reducing-line-spacing-for-span-cat/5747 "2022-06-27T18:33:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![blue482](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@blue482](https://support.prodi.gy/u/blue482)\
**Post date:** [June 27, 2022, 6:33pm UTC](https://support.prodi.gy/t/reducing-line-spacing-for-span-cat/5747/1 "2022-06-27T18:33:35Z")

</div>

Hi,

I have fairly large docs (~1000 tokens each) which I want to use prodigy span cat for annotation. I have reduced `smallText` and increased `cardMaxWidth`. However, the current interface (i.e. card) still looks quite sparse and negatively affects its annotation usability. Mainly the line spacing is v large.

I have tried setting `global_css` as below but the spacing between the text line and label highlight is still significantly larger than I hope for (screenshot attached: text are from publicly available clinical note).

`"global_css": ".prodigy-content > div { line-height: 0.0; padding: 0}"`

 ![Screenshot 2022-06-27 at 14.12.18](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/8/880d23c123c1c3433df6429de9f48abab91fdcb4.png)

My a noob in CSS/JS. Can anyone please give any suggestions? Many thanks!

---

<div class="post-metadata">

**Author:** ![ryanwesslen](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ryanwesslen/32/2969_2.png) [@ryanwesslen](https://support.prodi.gy/u/ryanwesslen)\
**Post date:** [June 27, 2022, 8:56pm UTC](https://support.prodi.gy/t/reducing-line-spacing-for-span-cat/5747/2 "2022-06-27T20:56:53Z")

</div>

Hi @blue482,

One possibility is to modify the margins for the span container in prodigy-content:

```python
"global_css": ".prodigy-content span { margin: -10px 1px; }"

```

For example, using Chrome and right click "inspect" you can see what happens when we modify:

![span](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/a/aa0a8fbe17134acc08bf39bb614879e3ad725e23.gif)

However, I noticed after doing this the labels may overlap the text. Therefore, you may have to adjust those as well.

Hopefully this helps some and let me know if you have other questions.

---

<div class="post-metadata">

**Author:** ![blue482](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@blue482](https://support.prodi.gy/u/blue482)\
**Post date:** [June 28, 2022, 2:49am UTC](https://support.prodi.gy/t/reducing-line-spacing-for-span-cat/5747/3 "2022-06-28T02:49:59Z")

</div>

> [@ryanwesslen](#):
>
> `span { margin: -10px 1px; }`

Many thanks Ryan! I can't seem to find the `.c01134` element in inspect on Chrome, or anywhere on inspect that can adjust the line spacing between sentences

 ![Screenshot 2022-06-27 at 22.38.58](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/a/ae68981e734b37b28a75dcc760c6f2172344f730.jpeg)

---

<div class="post-metadata">

**Author:** ![ryanwesslen](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ryanwesslen/32/2969_2.png) [@ryanwesslen](https://support.prodi.gy/u/ryanwesslen)\
**Post date:** [June 28, 2022, 1:36pm UTC](https://support.prodi.gy/t/reducing-line-spacing-for-span-cat/5747/4 "2022-06-28T13:36:20Z")

</div>

I found the `span` class (and `.c01134` element) because I right-clicked \> Inspect one of the words (rather than in the white space).

![span2](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/6/6638f7aae8f391f6bdfa366482dac590162050f2.gif)

Alternatively, were you able to add

```python
"global_css": ".prodigy-content span { margin: -10px 1px; }"

```

into your `prodigy.json` file?

---

<div class="post-metadata">

**Author:** ![blue482](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@blue482](https://support.prodi.gy/u/blue482)\
**Post date:** [June 28, 2022, 4:28pm UTC](https://support.prodi.gy/t/reducing-line-spacing-for-span-cat/5747/5 "2022-06-28T16:28:55Z")

</div>

Thanks Ryan!

I have adjusted the span margin to "global\_css": ".prodigy-content span { margin: -30px 1px; }" and now the highlighted label is out of place:

 ![Screenshot 2022-06-28 at 12.26.27](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/7/77ba3d47a77ead63bf0b80b0ea2eb5a4b53311fe.png)

I have used inspect to adjust the height for the "Good\_SRC" label and the horizontal line (they are 3 lines and I had to adjust each one by one). But I couldn't find where to adjust the height for the purple highlighted blocks (supposed to cover the relevant text "Bipolar affective disorder"). Is it any easier way to do this?