去除inline-block元素间的间距

levius 发布于2019-04-23 11:42 / 427人阅读

摘要：一现象描述真正意义上的水平呈现的元素间，换行显示或者空格隔开的情况下会有间距，这是因为浏览器在解析时，会将换行等读取成一个空格导致。链接链接链接链接给父级设置，然后再在子元素中设置我们的字体大小，这样也可以去掉元素间的间距。

一、现象描述

　　真正意义上的inline-block水平呈现的元素间，换行显示或者空格隔开的情况下会有间距，这是因为浏览器在解析时，会将换行等读取成一个空格导致。

二、移出空格的方法

　　① 我们可以去掉元素之间的换行和空格，这样间距自然就没有了，但是这样会降低代码的可读性，不可取。

    <div>
        <a href="">
        链接1a><a href="">
        链接2a><a href="">
        链接3a><a href="">
        链接4a>
    div>

    <div>
        <a href="">链接1a
        ><a href="">链接2a
        ><a href="">链接3a
        ><a href="">链接4a>
    div>

    <div>
        <a href="">链接1a><a href="">链接2a><a href="">链接3a><a href="">链接4a>
    div>

　　② 使用margin负值，但是，由于外部的不确定因素，以及最后一个元素多出来的负margin值的问题，这个方法也不太可取。

<style>
        a {
            background: pink;
            display: inline-block; 
            padding: .5em 1em;
            margin: -3px;
        }
style>
<body>
    <div>
        <a href="">链接1a>
        <a href="">链接2a>
        <a href="">链接3a>
        <a href="">链接4a>
    div>
body>

　　③ 给父级设置font-size:0，然后再在子元素中设置我们的字体大小，这样也可以去掉元素间的间距。

<style>
        div{
            font-size: 0;
        }
        a{
            font-size: 16px;
            background: pink;
        }
style>
<div>
        <a href="">链接1a>
        <a href="">链接2a>
        <a href="">链接3a>
        <a href="">链接4a>
div>

　　④ 删掉闭合标签。

    <div>
        <a href="">链接1
        <a href="">链接2
        <a href="">链接3
        <a href="">链接4      
    div>

　　⑤ 使用letter-spacing。

<style>
        div{
            letter-spacing: -6px;
        }
        a{
            letter-spacing: 0;
            background: pink;
        }
style>
<div>
        <a href="">链接1a>
        <a href="">链接2a>
        <a href="">链接3a>
        <a href="">链接4a>
div>

　　⑥ 使用word-spacing。

<style>
        div{
            word-spacing: -6px;
        }
        a{
            word-spacing: 0;
            background: pink;
        }
style>
<div>
        <a href="">链接1a>
        <a href="">链接2a>
        <a href="">链接3a>
        <a href="">链接4a>
div>

超融合服务器 idc机房托管 html文字间的间距 html块内元素间距 php去除数组的元素 js 去除相同的元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1041.html

【CSS练习】IT修真院--练习6-护工列表界面

摘要：任务六护工列表页完成的事情规划任务六完成基本界面编写计划的事情限制最小宽度使用雪碧图替换当前的多张图片引入完成模拟下拉框编写屏幕过窄时，列表项左边文字被截断出现省略号复习之前的代码规范，优化代码查看验收标准查看深度思考遇到的问题收获页面原生任务六、护工列表页完成的事情 1.规划任务六2.完成基本界面编写计划的事情 [x] 限制最小宽度 [x] 使用雪碧图替换当前的多张图片引入...

Sleepy 2019-08-30 15:53 评论0 收藏0
inline-block兼容及间隙问题

摘要：一兼容性不识别但可以触发块元素，其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置，使用触发。一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致原因分析：使用inline-block属性在IE下会...

learn_shifeng 2019-08-28 18:30 评论0 收藏0
inline-block兼容及间隙问题

摘要：一兼容性不识别但可以触发块元素，其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置，使用触发。一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致原因分析：使用inline-block属性在IE下会...

binaryTree 2019-08-01 15:01 评论0 收藏0
构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

andot 2019-08-29 16:31 评论0 收藏0
构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

JessYanCoding 2019-08-02 16:31 评论0 收藏0