如何取消行内元素之间的间距问题


如何去除内联元素(inline-block元素)之间的间距

下面总结了几条去除inline元素和inline-block元素去除间距的方法:

1.在写代码的时候,直接把行内元素的代码写在一行上,不分行的话,就不会出现这种情况了.但是缺点是代码不优雅了,但是的确保证了原汁原味的代码安排.

  网络搜素的意见:可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。

 

错误的一个粗暴做法.在父级的设计上,使用font-size:0px;我发现局部上是可以的.因为我的代码是盒子的布局.但是比较有局限性,如果盒子里有文字,就不行了..



2、设置margin-right为负值,但要考虑上下文的字体和文字大小。

3、先设定子元素字体,再设置父元素font-size:0px;////chrome中:-webkit-text-size-adjust:none;

4、设置父元素letter-spacing或word-spacing为负值,要考虑字体,子元素有文字也要注意设置letter-spacing或word-spacing的值。

 

 

以下是我测试居中布局时的代码.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0px;
        padding: 0px;
    }
        body{
            text-align: center;
            /*font-size:0.1px;*/
        }
        .block{
            /*w200*/
            width: 200px;
            height: 200px;
            width: 400px;
            background: red;
            display: inline-block;
        
/*            letter-spacing:0px;
            word-spacing: 0px;*/
        }

    </style>
</head>
<body>

<!-- .box>.block*3 Tab 就会自动出来-->
    <div class="box">
        <div class="block">文字会不会继承呢?</div><div class="block"></div><div class="block"></div>
    </div>

</body>
</html>

 



5.float:left;


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM