填充左：5px的;不起作用

Question

我正在尝试在图像和文本之间添加空格，但不会出现空格。请指导。感谢

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>

Answer 1

使用margin-right代替img。

img{
    margin-right:5px;
}

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

Answer 2

填充不起作用的原因是因为图像浮动并且段落不是向上推动图像而是<li>元素。为了达到你想要的效果，你应该对图像应用边距，而不是将文本（而不是<p>元素）推向右边。

要查看此内容，请将outline:1px solid;应用于p元素，或在浏览器的开发者工具中查看。