CODEWITHSUNDEEP
css
user379888
user379888

Reputation:

padding-left:5px; does not work

I am trying to add space between the image and the text but no space appears. Please guide. Thanks

http://jsfiddle.net/5bxc8v7a/

<li>Production:</li>
<img style="float:left;" src="http://www.ndm.com.pk/wp-content/uploads/2015/06/Production.png">
<p style="padding-left:5px;" >
We have a technologically developed wastewater treatment plant that allows us to treat the byproduct generated from various production activities before letting it back into the water lines, and staff trained in eco-friendly production. Through numerous checks and balances within our production processes as well as the timely execution of several projects by our industrial engineering team we have been able to reduce our energy consumption by 25% and continue to look for ways to improve this. Furthermore we have reduced our water consumption by an impressive 27% through reutilization in certain processes and the installation of flow meters so that human error can be minimalized.
</p>

Upvotes: 0

Views: 213

Answers (2)

Rob
Rob

Reputation: 15158

The reason padding doesn't work is because the image is floated and the paragraph isn't pushing up against the image but the <li> element. To achieve what you want, you should apply margin to the image instead which will push the text (but not the <p> element) to the right.

To view this, apply outline:1px solid; to the p element or view it in your browser's developer tools.

Upvotes: 2

gopalraju
gopalraju

Reputation: 2309

Use margin-right for the img instead.

img{
    margin-right:5px;
}

http://jsfiddle.net/5bxc8v7a/1/

Upvotes: 3

Related Questions