gpt4 book ai didi

html - 使用 float 向元素添加边距/填充

转载 作者:行者123 更新时间:2023-11-28 01:53:15 26 4
gpt4 key购买 nike

我在为段落标记添加边距和填充时遇到问题。我怀疑这与将我的 img 元素向左浮动有关。在保持图像右侧的段落的同时,我尝试在我的 p 标签上同时添加左右填充,因为它既不触及包装器也不触及 img

<body>
<div class="wrapper">
<div class="section">
<img src="about.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus et neque non volutpat. Aliquam ut pharetra ante. Proin cursus aliquam posuere. Quisque vitae ligula a lectus feugiat elementum. Pellentesque sodales arcu sed tortor dapibus, ut ultricies nibh ultricies. Vivamus accumsan gravida hendrerit. Vivamus nec ornare velit, quis volutpat velit. Fusce consectetur sagittis metus, et molestie mauris consequat at. Cras fermentum, ligula at vestibulum eleifend, leo turpis cursus libero, non porttitor diam tortor eu turpis. Nulla sodales velit metus, sit amet consectetur leo dapibus vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

*{
margin: 0;
padding: 0;
}

.wrapper {
width: 80%;
margin: 0 auto;
background-color: blue;
}

.section img {
float: left;
}

.section p {
padding: 0 40px;
display: inline;
text-align: justify;
}

.section:after {
content: "";
display: block;
clear: both;
}

已编辑

如您所见,段落 block 从 wrapper 开始,而不是在图像旁边 View in Developer Tool

最佳答案

您遇到此问题的原因是因为您已将 display: inline 属性分配给 .section p 选择器。您要么必须摆脱它,要么使用 display: inline-block。这将解决您的问题。试试这个代码。

.section p {
padding: 0 40px;
margin-left: 100px;
text-align: justify;
}

关于html - 使用 float 向元素添加边距/填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49799738/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com