删除display:flex会在链接周围添加空格为什么?

简介: 删除display:flex会在链接周围添加空格为什么?

如何解决删除display:flex会在链接周围添加空格为什么??
这是因为flexBox删除inline或inline-block元素之间的默认空白。

这是没有flexBox的代码,其中有空格:

.Box {
font-size:30px;
}

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

.Box {
font-size:30px;
}

或通过使div成为flexBox容器:

.Box {
display:flex;
font-size:30px;
}

如果我们检查规格:

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

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

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

如果删除flex属性,为什么会添加空格?

html

Oops!

The Page you are looking for does not exist! Click here to go back to home page of the application !

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 of the html/
justify-content:center;
grid-row: 2/3;
}

声明:地推任务网所有作品(图片、文字)均由用户自行上传分享,仅供网友学习交流。

相关文章
|
2月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
55 1
|
4月前
|
小程序
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
121 1
如何修改ELEMENT组件中的padding间距-样式名不能重复问题
如何修改ELEMENT组件中的padding间距-样式名不能重复问题
CSS3 flex 布局在 wrap 换行模式下,让中间指定元素换行
CSS3 flex 布局在 wrap 换行模式下,让中间指定元素换行
1125 0
CSS3【display: flex;】与【align-items: 侧轴对齐方式;】的使用
CSS3【display: flex;】与【align-items: 侧轴对齐方式;】的使用
77 0
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
74 0
CSS3【display: flex;】与【order: 控制子元素的顺序;】的使用
CSS3【display: flex;】与【order: 控制子元素的顺序;】的使用
111 0
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
53 0
|
前端开发
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
42 0
CSS3 【display: flex;】与【order: 控制子元素的顺序;】的使用
CSS3 【display: flex;】与【order: 控制子元素的顺序;】的使用
71 0