html - 获取图像和文本之间的空间

Question

我有一张图片使用 style = "float: left; pushed to the left side 然后出现一个 bestimter 文本，现在看起来像这样......

如何在图像和文本之间留出一些空间？

<div>
<img alt="" src="images/about/uhr.jpg" style="float:left; height:180px; width:180px" />
</div>
<blockquote>
<p></p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>
</br>

Answer 1

试试这个 CSS:

您的 HTML 代码:

<img alt="" src="images/about/uhr.jpg" class="image-margins" style="float:left; height:180px; width:180px" />

您的 CSS:

.image-margins{
    margin: 10px;
}

你可以删除图像的样式属性并将其添加到 css 类中，如下所示:

HTML 代码:

<img alt="" src="images/about/uhr.jpg" class="image-margins" /> <!-- LOOT AT THE CLASS ATTRIBUTE -->

CSS:

.image-margins{
    margin: 10px;
    float:left; 
    height:180px; 
    width:180px;
}   

每当您将 class="image-margins" 属性添加到任何 img 标签时，上述 css 将仅应用于该元素。

UPDATED FIDDLE EXAMPLE