加上margin-left后文字自动换行
时间: 2023-07-15 21:13:06 浏览: 58
当使用 `margin-left` 时,如果单行文本内容超过了父容器的宽度,那么它就会自动换行,因为这样它就能适应它的父容器了。但是,如果你想要在同一行中显示多个元素,并在每个元素之间添加间距,那么你可以使用 `display: inline-block` 和 `margin-left` 属性。
例如,假设你有一个 `div` 元素,你想在它的左侧显示一个图标,并在图标和文本之间添加一定的间距,你可以这样写:
```html
<div class="container">
<img src="icon.png" alt="Icon" class="icon">
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
```
```css
.container {
width: 300px;
height: auto;
background-color: #f5f5f5;
padding: 20px;
}
.icon {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
}
.text {
display: inline-block;
margin-left: 10px;
}
```
这样,你就可以在 `div` 元素中显示一个图标和一段文本,并在它们之间添加一定的间距了。如果文本内容超过了父容器的宽度,那么它就会自动换行。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)