css布局内联、外联、内联-块级的学习_内联布局

作者：羊村懒王 | 2024-04-14 09:44:21

踩

内联布局

在css中元素的display显示方式有多种，隐藏、块级、内联、内联-块级
在这里插入图片描述
主要是记录内联-块级，因为内联不换行，但是不能设置大小。块级可以设置大小，但是必须换行，在有些场景就必须要又不换行又可以设置大小。

<style>
span{
   display:inline-block;
   border: 1px solid lightgray;
   margin:10px;
   width:100px;
}
</style>
像这样 ，每个都能设置宽度 ，同时还能在同一行。
<br>
 
<span>盖伦</span>
<span>蒙多医生</span>
<span>奈德丽</span>
<span>蒸汽机器人</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

出现的结果
在这里插入图片描述
去掉display:inline-block;则会出现大小不一致的情况，不能设置每个的统一间距

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/421416