用 font-size:0来清除inline-block元素之间的间距

本文探讨了使用inline-block布局时元素间出现的间隙问题,并提供了解决方案,包括使用浮动、压缩HTML以及设置父元素的font-size属性。

inline-block的元素之间会受空白区域的影响,也就是元素之间差不多会有一个字符的间隙。如果在同一行内有4个25%相同宽度的元素,会导致最后一个元素掉下来(如图)。你可以利用元素浮动 float,或者压缩html,清除元素间的空格来解决。但最简单有效的方法还是设置父元素的 font-size属性为 0


请你针对这部分修改,为避免样式改变 把样式代码也修改:.csw-h5-contest-racesSlots { padding: 12px 24px 0; .csw-opensource-h5-learningHeader { height: 24px; width: 100%; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; .csw-opensource-h5-learningHeader-title { color: rgb(0, 0, 0); font-size: 18px; font-weight: 500; line-height: 20px; } .csw-opensource-h5-learningHeader-more { color: rgb(153, 153, 153); font-size: 12px; font-weight: 400; line-height: 16px; .csw-opensource-h5-learningHeader-moreText { padding-right: 4px; } } } .csw-h5-contest-racesSlots-content { position: relative; .adm-jumbo-tabs-header { border: 0; .adm-jumbo-tabs-tab-list { padding: 0; .adm-jumbo-tabs-tab-wrapper { flex: none; padding: 0; margin-right: 16px; .adm-jumbo-tabs-tab { font-weight: 500; color: rgb(102, 102, 102); padding: 0; } .adm-jumbo-tabs-tab-active { color: rgb(0, 65, 211); } } } } .adm-jumbo-tabs-content { padding: 16px 0 12px; } .csw-h5-contest-topSummitsCarousel { width: 100%; padding-bottom: 12px; .topSummitsList { display: flex !important; justify-content: space-between; .topSummitsItem { width: 48%; position: relative; img { width: 100%; aspect-ratio: 1.785; border-radius: 4px; } .mask { width: 100%; height: 100%; position: absolute; bottom: 0; border-radius: 4px; } .maskCourse { position: absolute; top: 6px; right: 6px; display: inline-block; height: 20px; text-align: center; line-height: 20px; padding: 2px 8px 2px 8px; border-radius: 53px; background: rgba(0, 65, 211, 0.7); color: rgb(255, 255, 255); font-size: 11px; font-weight: 400; line-height: 16px; } .topSummitsItemTitle { display: inline-block; margin-top: 8px; width: 100%; color: rgb(0, 0, 0); font-weight: 400; line-height: 24px; } .itemSubTitle { font-family: HarmonyHeiTi; color: #666666; font-size: 12px; font-weight: 400; line-height: 19px; } } } .slick-dots-bottom { bottom: 3px; z-index: 9; li { height: 2px !important; width: 6px !important; } button { width: 6px !important; background: #f2f2f2 !important; opacity: 1 !important; border-radius: 30px !important; height: 2px !important; } .slick-active { width: 12px !important; border-radius: 1px !important; button { background-color: rgb(0, 65, 211) !important; width: 12px !important; } } } } .csw-racesSlots-h5-more { color: rgb(153, 153, 153); font-size: 12px; font-weight: 400; line-height: 16px; position: absolute; right: 0; top: 17px; .anticon-right { margin-left: 3px; } } .moreDomCss { position: absolute; top: 4px; right: 0; color: rgb(153, 153, 153); font-size: 12px; font-weight: 400; line-height: 16px; .moreText { padding-right: 4px; } } } }
最新发布
11-21
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值