css - 图像底部文本换行对齐的 float 图像

标签 css

我正在使用 float 制作文字环绕图像。但是, float 图像的底部有一个意想不到的边距。有解决办法吗?

enter image description here

p{
    font-size: 16px;
}
img{
    float: left;
    margin: 18px 18px 18px 0;
}
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur suscipit debitis labore illo quod aut itaque id laudantium. Amet, magnam aliquam recusandae fugit sint quidem eveniet tenetur quasi voluptatum? Debitis officia dolores exercitationem, consequuntur quia ipsum obcaecati praesentium! Sit totam ipsam culpa, ipsa odit officiis voluptates dolorem asperiores veritatis quibusdam, libero voluptas modi provident dignissimos necessitatibus eum quaerat temporibus reiciendis expedita aliquid recusandae fugit. Esse sunt, nulla sint exercitationem quae, ad magnam laudantium quibusdam voluptatibus quia, voluptas corporis! Ab ad amet at corrupti atque voluptatum omnis cumque iure consequatur quia quaerat nemo, impedit, provident distinctio blanditiis quo exercitationem dolorum eos!
    <img src="https://placeimg.com/420/320/any">
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio cupiditate iusto molestiae expedita nesciunt? Ducimus earum perspiciatis quam a incidunt nemo exercitationem id itaque reiciendis? Error tempore eligendi, voluptatem incidunt perspiciatis aspernatur, unde cupiditate in, enim ullam culpa? Et debitis ipsa nobis amet ea perspiciatis temporibus qui quos dolores totam, voluptatem impedit fugiat facere accusamus illo, voluptatibus inventore autem, libero provident enim eius. Expedita modi deleniti consequuntur deserunt quas praesentium incidunt doloremque quos voluptas accusamus nihil alias labore architecto cum, atque, dolores nisi dolorem perspiciatis quibusdam autem, neque magni quo! Maiores, nam, rerum ad ipsa libero consectetur quis reprehenderit facilis vel impedit optio rem cupiditate necessitatibus qui deserunt est repellendus molestiae nobis quisquam alias id! 
   </p>

最佳答案

将边距更改为 margin: 18px 18px 0px 0px;

它的边距和填充有 4 个参数:顶部、右侧、底部、左侧。所以你在第三个参数中添加了 18px

关于css - 图像底部文本换行对齐的 float 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45192738/

相关文章:

Javascript 幻灯片卡住

html - 如何对齐插入:before method?的图标

javascript - 在交替点击时在 2 种颜色之间切换 div 的背景颜色

javascript - 如何使用 React 隐藏按钮

html - 为什么css中的背景图片表示为url,而img中的图片只能是文件路径

javascript - 如何为同一页面上的多个 div 制作 jQuery slidetoggle 效果?

html - Margin 0 auto 不会让我的两个 div 居中

jquery - 悬停多个元素无法正常工作

css - 格式化 3 列加起来为 100%。但最后一列被推下

css - 无论悬停不工作 IE6 和 IE7