0

I'm trying to change the line spacing to be single-spaced for the summary text in the span in the top left block under "Works" in http://alexanderwales.com (and no, I'm not Alexander Wales, just a random fan). The text has a quite large spacing inbetween the lines, it looks about double spaced.

line-height: normal !important does nothing. From my limited css experience this should have worked.

Commenting out both line-heights in the body makes the spacing better, but I'm not sure why.

If you know the answer to the question I'd also be very interested in how you got that answer. Unlike regular code, when I have CSS problems I have no idea how to debug them, besides googling and flailing around trying random things until it works.

Xpath of the element in question in case I didn't describe it well enough: /html/body/div[1]/main/div/div/div/div/div/div/section[3]/div/div/div[1]/div/div/section/div/div/div/div/div/div[2]/div/span

It's the one that says "A teenager struggling after the death of his best friend finds himself in a fantasy world - one which seems to be an amalgamation of every Dungeons and Dragons campaign they ever played together."

Almenon
  • 1,191
  • 11
  • 22

3 Answers3

2

In the chrome dev tools, there's a computed tab when an element is selected. You can use that to view how a particular style is being a applied to an element and from where. You can go through each part of it and disable them to see where styles are coming from and how to override them better.

In this case, all you have to do is apply the line height to the div.elementor-widget-container that is that span's parent, and then the component will have the line-height associated with it.

enter image description here

Zachary Haber
  • 10,376
  • 1
  • 17
  • 31
  • I found my answer in https://stackoverflow.com/questions/11829393/why-is-the-spans-line-height-is-useless - I was wondering about why I couldn't style the span specifically. Thanks for commenting though, I might not have found that without your comment. I gave you a upvote :) – Almenon May 08 '20 at 04:09
0

seems like there is a line height property on your div element with class "elementor-widget-container" ( some value inhertited from the body ), I removed that on the devtools and the line heights looks smaller.

and how I got there? I usually check parent component properties to look for something that might "leak" through.

Mario Perez
  • 2,777
  • 1
  • 12
  • 21
0

I'm trying to change the line spacing to be single-spaced for the summary text in the span

‎ The span has display: inline, line-height does not work for inline elements.

I think the idea is that if you had a inline element in a block of text the CSS spec assumes you wouldn't want to have one line with a different line-height than the rest, so it doesn't allow you to set line-height. For example, if you had

<p>lorem ipsum. 
Sed ut <em>perspiciatis unde</em>
ut aliquid ex 
ea commodi consequatur? </p>

it would be weird if the second line had a different line-height than the rest.

Important note: line-height is not the only thing that doesn't work for inline elements. Read more at CSS display: inline vs inline-block

If you know the answer to the question I'd also be very interested in how you got that answer. Unlike regular code, when I have CSS problems I have no idea how to debug them, besides googling and flailing around trying random things until it works.

When a commenter tried to answer the question I googled around some more and eventually ran into the stackoverflow answer about inline elements. If I run into problems in the future I should add in the html element I'm having trouble with. For example, a "span line-height not working" google search query would have answered my question in the second result. So unfortunately the strategy basically remains "googling and trying random things" but to be fair you could say that's pretty much what debugging is. Or you could say "researching and experimenting with educated guesses" if you wanted to be fancy.

Almenon
  • 1,191
  • 11
  • 22