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

最新推荐文章于 2025-05-09 15:35:22 发布

沈钢板

最新推荐文章于 2025-05-09 15:35:22 发布

阅读量592

点赞数

CC 4.0 BY-SA版权

分类专栏：天猫商城项目学习总结

本文链接：https://blog.youkuaiyun.com/qq_16930699/article/details/85248510

天猫商城项目学习总结专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了CSS中内联-块级（inline-block）元素的使用技巧，对比了内联与块级元素的特点，展示了如何利用内联-块级元素在同一行展示多个元素并设置统一大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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>

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