在图像和文本之间获取空间

Question

我有一个使用style =＆＃34; float：left的图像;推到左侧然后是一个现在看起来像这样的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

你可以使用＆＃34; margin-left＆＃34;在＆＃34; blockquote＆＃34;。

Answer 2

试试这个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 CODE：

<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

Answer 3

我建议在margin-right上使用img，如下所示：

<div>
<img alt="" src="images/about/uhr.jpg" style="float:left; height:180px; width:180px; margin-right:4px;" />
</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>

这会在img的右侧增加空间，将文本推了一下。

Answer 4

你可以使用这种风格

<style>
blockquote{
 margin-left:25px;
}
</style>

顺便说一句你在那里开始没有任何东西的p标签，所以如果你的造型p不起作用