您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站
问答- 问题:删除display：flex会在链接周围添加空格。为什么？

删除display：flex会在链接周围添加空格。为什么？

删除display：flex会在链接周围添加空格。为什么？

这是因为flex@R_67_2419@删除inline或inline-block元素之间的默认空白。

这是没有flex@R_67_2419@的代码，其中有空格：

.@R_67_2419@ {

  font-size:30px;

}


<div class="@R_67_2419@">

  <a>click</a>

  <a>here</a>

</div>
@H_404_11@

我们可以通过从标记中删除它或使用任何常用方法来删除该空白：


.@R_67_2419@ {

  font-size:30px;

}


<div class="@R_67_2419@">

  <a>click</a><a>here</a>

</div>
@H_404_11@

或通过使div成为flex@R_67_2419@容器：


.@R_67_2419@ {

  display:flex;

  font-size:30px;

}


<div class="@R_67_2419@">

  <a>click</a>

  <a>here</a>

</div>
@H_404_11@

如果我们检查规格：


   


    
flex容器的每个流入子元素都将成为一个flex项目，并且每个连续的子文本序列序列都被包装在一个匿名块容器flex项目中。但是，    （即可能受white-space属性影响的字符） 
空格（就像其文本节点显示为：none一样）。


   


因此，在我们的代码中，我们有两个子项和一个不带空格的空白序列。

   

          
解决方法
 

                
   

                    
    
我创建了一个html错误页面。它有2行显示错误。第二行链接到主页。为了使两行保持在中心，我创建了一个顶层css-grid并将网格的每一行都设为a

flex。我注意到，如果我display:flex用于第二行，则here链接周围没有任何空格，但是如果删除display:flex，该空格将被添加，即html从Clickhereto变为Click
hereto。


    
如果删除flex属性，为什么会添加空格？


    
码


    
html


    
<div id="invalid-page-grid-container">
  <h1 id="invalid-page-h1">Oops!</h1>
  <h6 id="invalid-page-para">The Page you are looking for does not exist! Click <a [routerLink]="homepageRouterLink"> here </a> to go back to home page of the application !</h6>
</div>



    
CSS


    
#invalid-page-grid-container{
  display:grid;
  justify-content:center;
}

#invalid-page-h1{
  display:flex;
  justify-content:center;
  grid-row: 1/2;
}

#invalid-page-para{
  /*display:flex;*//*UNCOMMENT THIS AND YOU'LL SEE SPACE GETTING ADDED AROUND <a> of the html*/
  justify-content:center;
  grid-row: 2/3;
}


                
   


                
   


   

    
   


   


   


    

     喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
    


    

      编程之家官方1群
    

    

      编程之家官方2群
    

    

      编程之家官方3群
    

    

      编程之家官方4群
    

   


   




   


    


     

     

     

    


    


     

     

     

    


   
 
      
.@R_67_2419@ {

  font-size:30px;

}


<div class="@R_67_2419@">

  <a>click</a><a>here</a>

</div>
@H_404_11@

或通过使div成为flex@R_67_2419@容器：


.@R_67_2419@ {

  display:flex;

  font-size:30px;

}


<div class="@R_67_2419@">

  <a>click</a>

  <a>here</a>

</div>
@H_404_11@

如果我们检查规格：


  


   
flex容器的每个流入子元素都将成为一个flex项目，并且每个连续的子文本序列序列都被包装在一个匿名块容器flex项目中。但是，    （即可能受white-space属性影响的字符） 
空格（就像其文本节点显示为：none一样）。


  


因此，在我们的代码中，我们有两个子项和一个不带空格的空白序列。

  

          
解决方法
 

                
  

                    
   
我创建了一个html错误页面。它有2行显示错误。第二行链接到主页。为了使两行保持在中心，我创建了一个顶层css-grid并将网格的每一行都设为a

flex。我注意到，如果我display:flex用于第二行，则here链接周围没有任何空格，但是如果删除display:flex，该空格将被添加，即html从Clickhereto变为Click
hereto。


   
如果删除flex属性，为什么会添加空格？


   
码


   
html


   
<div id="invalid-page-grid-container">
  <h1 id="invalid-page-h1">Oops!</h1>
  <h6 id="invalid-page-para">The Page you are looking for does not exist! Click <a [routerLink]="homepageRouterLink"> here </a> to go back to home page of the application !</h6>
</div>



   
CSS


   
#invalid-page-grid-container{
  display:grid;
  justify-content:center;
}

#invalid-page-h1{
  display:flex;
  justify-content:center;
  grid-row: 1/2;
}

#invalid-page-para{
  /*display:flex;*//*UNCOMMENT THIS AND YOU'LL SEE SPACE GETTING ADDED AROUND <a> of the html*/
  justify-content:center;
  grid-row: 2/3;
}


                
  


                
  


  

   
  


  


  


   

    喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
   


   

     编程之家官方1群
   

   

     编程之家官方2群
   

   

     编程之家官方3群
   

   

     编程之家官方4群
   

  


  




  


   


    

    

    

   


   


    

    

    

   


  
 
      
.@R_67_2419@ {

  display:flex;

  font-size:30px;

}


<div class="@R_67_2419@">

  <a>click</a>

  <a>here</a>

</div>
@H_404_11@

如果我们检查规格：


 


  
flex容器的每个流入子元素都将成为一个flex项目，并且每个连续的子文本序列序列都被包装在一个匿名块容器flex项目中。但是，    （即可能受white-space属性影响的字符） 
空格（就像其文本节点显示为：none一样）。


 


因此，在我们的代码中，我们有两个子项和一个不带空格的空白序列。

 

          
解决方法
 

                
 

                    
  
我创建了一个html错误页面。它有2行显示错误。第二行链接到主页。为了使两行保持在中心，我创建了一个顶层css-grid并将网格的每一行都设为a

flex。我注意到，如果我display:flex用于第二行，则here链接周围没有任何空格，但是如果删除display:flex，该空格将被添加，即html从Clickhereto变为Click
hereto。


  
如果删除flex属性，为什么会添加空格？


  
码


  
html


  
<div id="invalid-page-grid-container">
  <h1 id="invalid-page-h1">Oops!</h1>
  <h6 id="invalid-page-para">The Page you are looking for does not exist! Click <a [routerLink]="homepageRouterLink"> here </a> to go back to home page of the application !</h6>
</div>



  
CSS


  
#invalid-page-grid-container{
  display:grid;
  justify-content:center;
}

#invalid-page-h1{
  display:flex;
  justify-content:center;
  grid-row: 1/2;
}

#invalid-page-para{
  /*display:flex;*//*UNCOMMENT THIS AND YOU'LL SEE SPACE GETTING ADDED AROUND <a> of the html*/
  justify-content:center;
  grid-row: 2/3;
}


                
 


                
 


 

  
 


 


 


  

   喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
  


  

    编程之家官方1群
  

  

    编程之家官方2群
  

  

    编程之家官方3群
  

  

    编程之家官方4群
  

 


 




 


  


   

   

   

  


  


   

   

   

  


 
 
      
<div id="invalid-page-grid-container">
  <h1 id="invalid-page-h1">Oops!</h1>
  <h6 id="invalid-page-para">The Page you are looking for does not exist! Click <a [routerLink]="homepageRouterLink"> here </a> to go back to home page of the application !</h6>
</div>

#invalid-page-grid-container{
  display:grid;
  justify-content:center;
}

#invalid-page-h1{
  display:flex;
  justify-content:center;
  grid-row: 1/2;
}

#invalid-page-para{
  /*display:flex;*//*UNCOMMENT THIS AND YOU'LL SEE SPACE GETTING ADDED AROUND <a> of the html*/
  justify-content:center;
  grid-row: 2/3;
}

我们可以通过从标记中删除它或使用任何常用方法来删除该空白：

或通过使div成为flex@R_67_2419@容器：

如果我们检查规格：

flex容器的每个流入子元素都将成为一个flex项目，并且每个连续的子文本序列序列都被包装在一个匿名块容器flex项目中。但是， （即可能受white-space属性影响的字符） 空格（就像其文本节点显示为：none一样）。

因此，在我们的代码中，我们有两个子项和一个不带空格的空白序列。

我创建了一个html错误页面。它有2行显示错误。第二行链接到主页。为了使两行保持在中心，我创建了一个顶层css-grid并将网格的每一行都设为a
flex。我注意到，如果我display:flex用于第二行，则here链接周围没有任何空格，但是如果删除display:flex，该空格将被添加，即html从Clickhereto变为Click hereto。

如果删除flex属性，为什么会添加空格？

码

html

CSS

我们可以通过从标记中删除它或使用任何常用方法来删除该空白：

.@R_67_2419@ {

  font-size:30px;

}


<div class="@R_67_2419@">

  <a>click</a><a>here</a>

</div>
@H_404_11@

或通过使div成为flex@R_67_2419@容器：


.@R_67_2419@ {

  display:flex;

  font-size:30px;

}


<div class="@R_67_2419@">

  <a>click</a>

  <a>here</a>

</div>
@H_404_11@

如果我们检查规格：


  


   
flex容器的每个流入子元素都将成为一个flex项目，并且每个连续的子文本序列序列都被包装在一个匿名块容器flex项目中。但是，    （即可能受white-space属性影响的字符） 
空格（就像其文本节点显示为：none一样）。


  


因此，在我们的代码中，我们有两个子项和一个不带空格的空白序列。

  

          
解决方法
 

                
  

                    
   
我创建了一个html错误页面。它有2行显示错误。第二行链接到主页。为了使两行保持在中心，我创建了一个顶层css-grid并将网格的每一行都设为a

flex。我注意到，如果我display:flex用于第二行，则here链接周围没有任何空格，但是如果删除display:flex，该空格将被添加，即html从Clickhereto变为Click
hereto。


   
如果删除flex属性，为什么会添加空格？


   
码


   
html


   
<div id="invalid-page-grid-container">
  <h1 id="invalid-page-h1">Oops!</h1>
  <h6 id="invalid-page-para">The Page you are looking for does not exist! Click <a [routerLink]="homepageRouterLink"> here </a> to go back to home page of the application !</h6>
</div>



   
CSS


   
#invalid-page-grid-container{
  display:grid;
  justify-content:center;
}

#invalid-page-h1{
  display:flex;
  justify-content:center;
  grid-row: 1/2;
}

#invalid-page-para{
  /*display:flex;*//*UNCOMMENT THIS AND YOU'LL SEE SPACE GETTING ADDED AROUND <a> of the html*/
  justify-content:center;
  grid-row: 2/3;
}


                
  


                
  


  

   
  


  


  


   

    喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
   


   

     编程之家官方1群
   

   

     编程之家官方2群
   

   

     编程之家官方3群
   

   

     编程之家官方4群
   

  


  




  


   


    

    

    

   


   


    

    

    

   


  
 
      
.@R_67_2419@ {

  display:flex;

  font-size:30px;

}


<div class="@R_67_2419@">

  <a>click</a>

  <a>here</a>

</div>
@H_404_11@

如果我们检查规格：


 


  
flex容器的每个流入子元素都将成为一个flex项目，并且每个连续的子文本序列序列都被包装在一个匿名块容器flex项目中。但是，    （即可能受white-space属性影响的字符） 
空格（就像其文本节点显示为：none一样）。


 


因此，在我们的代码中，我们有两个子项和一个不带空格的空白序列。

 

          
解决方法
 

                
 

                    
  
我创建了一个html错误页面。它有2行显示错误。第二行链接到主页。为了使两行保持在中心，我创建了一个顶层css-grid并将网格的每一行都设为a

flex。我注意到，如果我display:flex用于第二行，则here链接周围没有任何空格，但是如果删除display:flex，该空格将被添加，即html从Clickhereto变为Click
hereto。


  
如果删除flex属性，为什么会添加空格？


  
码


  
html


  
<div id="invalid-page-grid-container">
  <h1 id="invalid-page-h1">Oops!</h1>
  <h6 id="invalid-page-para">The Page you are looking for does not exist! Click <a [routerLink]="homepageRouterLink"> here </a> to go back to home page of the application !</h6>
</div>



  
CSS


  
#invalid-page-grid-container{
  display:grid;
  justify-content:center;
}

#invalid-page-h1{
  display:flex;
  justify-content:center;
  grid-row: 1/2;
}

#invalid-page-para{
  /*display:flex;*//*UNCOMMENT THIS AND YOU'LL SEE SPACE GETTING ADDED AROUND <a> of the html*/
  justify-content:center;
  grid-row: 2/3;
}


                
 


                
 


 

  
 


 


 


  

   喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
  


  

    编程之家官方1群
  

  

    编程之家官方2群
  

  

    编程之家官方3群
  

  

    编程之家官方4群
  

 


 




 


  


   

   

   

  


  


   

   

   

  


 
 
      
<div id="invalid-page-grid-container">
  <h1 id="invalid-page-h1">Oops!</h1>
  <h6 id="invalid-page-para">The Page you are looking for does not exist! Click <a [routerLink]="homepageRouterLink"> here </a> to go back to home page of the application !</h6>
</div>

#invalid-page-grid-container{
  display:grid;
  justify-content:center;
}

#invalid-page-h1{
  display:flex;
  justify-content:center;
  grid-row: 1/2;
}

#invalid-page-para{
  /*display:flex;*//*UNCOMMENT THIS AND YOU'LL SEE SPACE GETTING ADDED AROUND <a> of the html*/
  justify-content:center;
  grid-row: 2/3;
}

或通过使div成为flex@R_67_2419@容器：

如果我们检查规格：

flex容器的每个流入子元素都将成为一个flex项目，并且每个连续的子文本序列序列都被包装在一个匿名块容器flex项目中。但是， （即可能受white-space属性影响的字符） 空格（就像其文本节点显示为：none一样）。

因此，在我们的代码中，我们有两个子项和一个不带空格的空白序列。

我创建了一个html错误页面。它有2行显示错误。第二行链接到主页。为了使两行保持在中心，我创建了一个顶层css-grid并将网格的每一行都设为a
flex。我注意到，如果我display:flex用于第二行，则here链接周围没有任何空格，但是如果删除display:flex，该空格将被添加，即html从Clickhereto变为Click hereto。

如果删除flex属性，为什么会添加空格？

码

html

CSS

或通过使div成为flex@R_67_2419@容器：

.@R_67_2419@ {

  display:flex;

  font-size:30px;

}


<div class="@R_67_2419@">

  <a>click</a>

  <a>here</a>

</div>
@H_404_11@

如果我们检查规格：


 


  
flex容器的每个流入子元素都将成为一个flex项目，并且每个连续的子文本序列序列都被包装在一个匿名块容器flex项目中。但是，    （即可能受white-space属性影响的字符） 
空格（就像其文本节点显示为：none一样）。


 


因此，在我们的代码中，我们有两个子项和一个不带空格的空白序列。

 

          
解决方法
 

                
 

                    
  
我创建了一个html错误页面。它有2行显示错误。第二行链接到主页。为了使两行保持在中心，我创建了一个顶层css-grid并将网格的每一行都设为a

flex。我注意到，如果我display:flex用于第二行，则here链接周围没有任何空格，但是如果删除display:flex，该空格将被添加，即html从Clickhereto变为Click
hereto。


  
如果删除flex属性，为什么会添加空格？


  
码


  
html


  
<div id="invalid-page-grid-container">
  <h1 id="invalid-page-h1">Oops!</h1>
  <h6 id="invalid-page-para">The Page you are looking for does not exist! Click <a [routerLink]="homepageRouterLink"> here </a> to go back to home page of the application !</h6>
</div>



  
CSS


  
#invalid-page-grid-container{
  display:grid;
  justify-content:center;
}

#invalid-page-h1{
  display:flex;
  justify-content:center;
  grid-row: 1/2;
}

#invalid-page-para{
  /*display:flex;*//*UNCOMMENT THIS AND YOU'LL SEE SPACE GETTING ADDED AROUND <a> of the html*/
  justify-content:center;
  grid-row: 2/3;
}


                
 


                
 


 

  
 


 


 


  

   喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
  


  

    编程之家官方1群
  

  

    编程之家官方2群
  

  

    编程之家官方3群
  

  

    编程之家官方4群
  

 


 




 


  


   

   

   

  


  


   

   

   

  


 
 
      
<div id="invalid-page-grid-container">
  <h1 id="invalid-page-h1">Oops!</h1>
  <h6 id="invalid-page-para">The Page you are looking for does not exist! Click <a [routerLink]="homepageRouterLink"> here </a> to go back to home page of the application !</h6>
</div>

#invalid-page-grid-container{
  display:grid;
  justify-content:center;
}

#invalid-page-h1{
  display:flex;
  justify-content:center;
  grid-row: 1/2;
}

#invalid-page-para{
  /*display:flex;*//*UNCOMMENT THIS AND YOU'LL SEE SPACE GETTING ADDED AROUND <a> of the html*/
  justify-content:center;
  grid-row: 2/3;
}

如果我们检查规格：

flex容器的每个流入子元素都将成为一个flex项目，并且每个连续的子文本序列序列都被包装在一个匿名块容器flex项目中。但是， （即可能受white-space属性影响的字符） 空格（就像其文本节点显示为：none一样）。

因此，在我们的代码中，我们有两个子项和一个不带空格的空白序列。

我创建了一个html错误页面。它有2行显示错误。第二行链接到主页。为了使两行保持在中心，我创建了一个顶层css-grid并将网格的每一行都设为a
flex。我注意到，如果我display:flex用于第二行，则here链接周围没有任何空格，但是如果删除display:flex，该空格将被添加，即html从Clickhereto变为Click hereto。

如果删除flex属性，为什么会添加空格？

码

html

CSS

如果我们检查规格：

flex容器的每个流入子元素都将成为一个flex项目，并且每个连续的子文本序列序列都被包装在一个匿名块容器flex项目中。但是， （即可能受white-space属性影响的字符） 空格（就像其文本节点显示为：none一样）。

因此，在我们的代码中，我们有两个子项和一个不带空格的空白序列。

其他 2022/1/1 18:15:44 有380人围观

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进，让解决方法与时俱进

请先登录

推荐问题

联系我

联系我

602392714

清零编程清零编程群

置顶