我在div标签中有一个h1、img和div标签。img标签我分配了一个float: left;。div标签分配了一个clear: both;。因为我想在image和div标签之间有一个空格，所以我也给div标签分配了一个margin-top。
**问题：**但是，未解释边距。
**问题：**为什么？我需要做什么才能插入空格？
* {
margin: 0;
padding: 0;
}
body {
background: black;
}
.block {
background: white;
padding: 10px;
display: flow-root;
}
.block img {
width: 300px;
text-align: right;
}
.leftFloat {
float: left;
margin-right: 10px;
}
.user-interaction-btns {
margin-top: 20px; /* this margin doesnt work, why? */
display: flex;
clear:both;
background: purple;
}<div class="block">
<h1>Title lorem ipsum </h1>
<img class="leftFloat" src="https://via.placeholder.com/300">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.
<div class="user-interaction-btns">
<button>Action</button>
</div>
</div>
2条答案
按热度按时间ztigrdn81#
这是因为上边距不是指图像，而是指上面的文本。解决这个问题的一个简单方法是添加一个下边距：10 px;到图像。
3htmauhk2#
Floating Elements是个老东西，有一些怪癖和漏洞。Flex-box是在2009年推出的，现在所有的网页浏览器都支持它，它的响应性和移动友好性。它拥有float的所有优点，但不需要执行漏洞。下面我从你的float方法换成了flex。