How to find out what's adding whitespace on a web page?

Question

I'm specifically wondering about this page: https://podato.herokuapp.com/#/podcasts/http%3A%2F%2Ffeeds.twit.tv%2Ftwig.xml/

Why is the text of each item not alligned with the image on the left?

But a more general question: how do I debug this sort of thing? What's the best way to find out where whitespace is coming from?

Answer 1

Try this in basscss line no 121

body {
line-height: 1;
}

Answer 2

For debugging you could use the built-in developer tools. For official guides:
Chrome: https://developer.chrome.com/devtools http://www.html5rocks.com/en/tutorials/developertools/part1/
Firefox: http://www.howtogeek.com/105320/how-to-use-firefoxs-web-developer-tools/
https://developer.mozilla.org/en/docs/Tools

Also for Firefox i know there is Firebug, a tool developed to make debugging somewhat easier.

To answer your question, take a look at Vikas Kapadiya's answer, in your body tag is a line-height: 1.5; declared. Try and change it in the developer tools to see what happens.

Edit

A possible solution could be wrapping the span elements in a seperate div. I'm thinking of adding a negative top margin. Feel free to come up with other methods, this is the first one i think of.

The reason i'd choose for a div is because it is a block element, whereas span elements are inline elements, which are unable to add a negative top margin to. Also i noticed that you use a data-reactid? I guess it would be a bit cleaner if you could add that to the container div, so the span elements (and the br tag) are free of the data-reactid. Don't know if that is desirable, but see for yourself what would be best.

div.data {
    margin-top: -5px;
    width: 100%;
}