📜  如何删除行内块元素之间的空间?

📅  最后修改于: 2021-10-29 04:44:22             🧑  作者: Mango

有两种方法可以去除内联块元素之间的空间。

方法一:将inline block元素的父元素的字体大小赋值为0px,然后将合适的font-size赋值给
内联块元素

上述概念由以下代码说明:

html


 

    
    
    
       
        /*Assign font-size of parent element to 0px*/
        div {
            font-size: 0px;                              
        }
 
        /*Making the element inline-block*/
        /*Assign proper font-size to the inline block element*/
        div span {
            display: inline-block;                        
            background-color: green;
            font-size: 10rem;                             
        }
    
    How to remove spaces between inline block elements

 

    
        Geeks
        For
        Geeks
    

 


HTML


 

    
    
    
        /*Making the parent element a flexbox*/
        div {
            display: flex;                             
        }
 
        /*Making the element inline-block*/
        /*Assign proper font-size to the inline block element*/
        div span {
            display: inline-block;                        
            background-color:rgb(53, 77, 5);
            font-size: 10rem;                             
        }
    
    How to remove spaces between inline block elements

 

    
        Geeks
        For
        Geeks
    

 


输出:

方法二:使父元素的显示为flex。

HTML



 

    
    
    
        /*Making the parent element a flexbox*/
        div {
            display: flex;                             
        }
 
        /*Making the element inline-block*/
        /*Assign proper font-size to the inline block element*/
        div span {
            display: inline-block;                        
            background-color:rgb(53, 77, 5);
            font-size: 10rem;                             
        }
    
    How to remove spaces between inline block elements

 

    
        Geeks
        For
        Geeks
    

 

输出: