display:inline-block;的那些事

1、为了让块元素保持在一行,或者想要给行元素设置宽高边距等属性时,为了方便,大家可能直接就使用了display:inline-block;属性。但是有一个问题,如果设置inline-block的元素不在同一行,则这两个元素之间就会有个小间距,不是margin和padding哦,是换行导致的一个空格。
比如以下列表


display: line-block;

这是设置了inline-block属性,并且每个元素单独一行,我们选中文字会发现,每个元素之间有个空格。


选中文字

若改成block元素,并使用浮动float:left;则没有了中间的空格


块元素+浮动
*** 若想解决inline-bloak元素间隙的问题,可在父元素加一个font-size:0;属性即可解决
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 今天早上起床后想起要做塔罗日记,抽一张牌。与其说抽,其实是拿出牌它就在第一张,看到这张牌我就有感觉,于是就直接拿了...
    LULU鲁鲁阅读 616评论 0 0
  • 文丨原创 图 |网络 01 对于血型,迷恋它的人不在少数。说起来你也许不信。血型不仅和个人的婚姻、家庭、脾气、秉性...
    红枣馒头阅读 1,428评论 3 4
  • 我的周围有很资深的同事,进入软件这个行业没有十年也有五六年,我和她们在一个项目中工作时,往往惊讶于她们处处显现的真...
    张凯峰阅读 751评论 1 4
  • 背井离乡说到回老家内心都是充满喜悦和期盼,可随着时代的发展我们这一代跟我们的父辈内心的感觉完全不一样,今...
    盛世贏家葉小華阅读 245评论 0 0
  • 祭出demo 基础示例 组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、...
    rainbowboy阅读 884评论 0 50

友情链接更多精彩内容