CODEWITHSUNDEEP
htmlcsswhitespace
bigblind
bigblind

Reputation: 12887

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

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?

Upvotes: 2

Views: 1038

Answers (1)

Mathijs Rutgers
Mathijs Rutgers

Reputation: 815

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%;
}

Upvotes: 1

Related Questions