html - p 在 img 之后。但为什么 margin-left 不起作用？

Question

我为 img 写了 display:block 和 float:left。 margin-left 为 p。全部在分区中。为什么要在 img 上 p？

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        body {
            background-color: midnightblue;
            font-family: Arial, Helvetica, sans-serif;
            color: white;
        }

        .img2 {
            width: 200px;
            float: left;
        }

        .content p {
            margin-left: 30px;
        }

<div class="content">
        <div>
            <img class="img2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRw7Pnm4-SCq3puS-je9jG5AwQSF77oPe_ORrg7ot0gq9QDPQPt" alt="Rasm topilmadi">
        </div>
        <p>Lorem ipsum dolor sit amet,
            consectetur
            adipisicing elit.
            Omnis asperiores hic
            voluptatum labore optio nobis
            accusantium vitae. Non, a! Enim error facilis a. Nam quibusdam qui excepturi facere consequatur
            voluptatibus.</p>
    </div>

为什么 margin-left 不起作用？ codepen对于我的问题

Answer 1

这就是 float left 应该如何工作。 如果将 ma​​rgin-left 设置为 220px，您会看到 p-tag 有一个边距。我猜您想改为向 img-tag 添加边距(-right)。

请注意，将 float: left; 添加到 p-tag 也可以解决您的问题，因为包含 float: left; 的所有子节点只是从左到就在您的 div 元素内。