css字放在图片下面 |css去掉所有默认边距

// HTML代码
<div class="image-container">
<img src="picture.jpg">
<p>这是图片下面的文字</p>
</div>
// CSS代码
.image-container {
position: relative;
}
.image-container img {
display: block;
max-width: 100%;
}
.image-container p {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: rgba(0,0,0,0.5);
color: white;
font-size: 16px;
text-align: center;
}

首先，大家需要一个包含图片和文字的容器，这里使用了一个div标签，并为其设置了一个类名。接下来，大家需要使用CSS的定位属性，将文字放在图片的下方。

首先，为包含图片的容器设置position:relative;属性，以便为后面的绝对定位提供参照。然后，给图片添加display:block;和max-width:100%;这两个属性，可以使其在容器中水平居中，并保证其大小不超过容器的宽度。接下来，大家为文本内容添加position:absolute;以脱离文档流，并使用bottom:0;left:0;right:0;将其定位在图片下方。此外，大家还为文本添加了一个padding属性和一个背景颜色为半透明黑色的背景，以便让文本内容更加醒目。最后，大家可以通过color、font-size、text-align等CSS属性来控制文本的样式。

通过上述CSS代码的编写，大家就可以将文字放在图片的下面，实现一个漂亮的效果。