减少响应div或类html/css3之间的空间

我正试图创建一个网站，我正试图实现响应图标字体。我已经成功地做到了这一点（使用媒体查询），但当屏幕改变时，随着屏幕变小，空间开始显示并增长

这是我的HTML代码-我尝试删除“”以消除换行：

   <div class="item"> 
<span class = "icon-mobile"> 
<span class="caption">Call </div>

<div class="item"> 
<span class = "icon-mail"> 
<span class="caption">Email </div> 

<div class="item"> 
<span class = "icon-location"> 
<span class="caption">Studio </div> 

<div class="item"> 
<span class = "icon-calendar">
<span class="caption">Hours</div>

CSS3媒体查询代码为：

@media screen and (max-width: 299px) {
    .icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
    font-size: 2vw;
    }

    .caption {
        font-size: 1.5vw;
    }
}

@media screen and (min-width: 300px) and (max-width: 799px) {
    .icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item{
        font-size: 90%;
    }
    .caption {
        font-size: 30%;

    }
}

@media screen and (min-width: 800px) {
    .icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
        font-size: 5vw;
    }

    .caption {
        font-size: 2vw;
    }
}

我曾尝试在标题和项目类中添加“height:50px；”和“height:auto；”。在网站上创建重复行后，我尝试创建flexbox以测试：

.contact_details2{
 display: flex;
justify-content: center;
}

.item2{
flex: 1 1 20em;
padding: 0!important;
}

.caption{
padding: 0!important;
}

以下是图标字体的代码，以防对某人有用：

@font-face {
    font-family: 'debssite';
    src: url('fonts/debssite.eot');
    src: url('fonts/debssite.eot?#iefix') format('embedded-opentype'),
    url('fonts/debssite.woff2?') format('woff2'),
    url('fonts/debssite.woff?') format('woff'),
    url('fonts/debssite.ttf?') format('truetype'),
    url('fonts/debssite.svg?') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'debssite';
    src: url('./fonts/debssite.svg?#debssite') format('svg');
  }
}
*/

[class^="icon-"]:before, 
[class*=" icon-"]:before {
    font-family: "debssite";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-calendar:before { 
    content: "\e800"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-location:before { 
    content: "\e801"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-mail:before { 
    content: "\e802"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-facebook:before { 
    content: "\f09a"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-mobile:before { 
    content: "\f10b"; 
    font-size: 64px;
    color: #b31b1b;
    margin:0px;
} 
.icon-youtube:before { 
    content: "\f167"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-instagram:before { 
    content: "\f16d"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-pinterest:before { 
    content: "\f231"; 
    font-size: 32px;
    color: #b31b1b;
    margin:10px;
}

我将非常感谢您在尝试解决此问题时提供的任何帮助/意见，即使您认为您的意见不会有帮助（可能会有帮助！）

谢谢,

理查德

创建编辑以添加图标字体的代码。

。联系信息{
文本对齐：居中；
}
.项目{
垂直对齐：顶部；
显示：内联块；
宽度：自动；
高度：自动；
保证金：0%自动；
颜色：#b31b1b；
}
/*图标字体下方的文本*/
.标题{
显示：块；
文本对齐：居中；
}
CSS3媒体查询代码为：
@媒体屏幕和屏幕（最大宽度：299px）{
.icon邮件：之前，.icon手机：之前，.icon日历：之前，.icon位置：之前，.item{
字体大小：2vw；
}
.标题{
字体大小：1.5vw；
}
}
@介质屏幕和（最小宽度：300px）和（最大宽度：799px）{
.icon邮件：之前，.icon手机：之前，.icon日历：之前，.icon位置：之前，.item{
字体大小：90%；
}
.标题{
字体大小：30%；
}
}
@媒体屏幕和屏幕（最小宽度：800px）{
.icon邮件：之前，.icon手机：之前，.icon日历：之前，.icon位置：之前，.item{
字体大小：5vw；
}
.标题{
字体大小：2vw；
}
}
我试着增加高度：50px；高度：自动；添加到标题和项目类。我已尝试在创建重复行后创建flexbox：
.联络(详情2){
显示器：flex；
证明内容：中心；
}
.项目2{
弹性：120em；
填充：0！重要；
}
.标题{
填充：0！重要；
}

呼叫
电子邮件
演播室
小时数

。联系信息{
文本对齐：居中；
}
.项目{
垂直对齐：顶部；
显示：内联块；
宽度：自动；
高度：自动；
保证金：0%自动；
颜色：#b31b1b；
}
/*图标字体下方的文本*/
.标题{
显示：块；
文本对齐：居中；
}
CSS3媒体查询代码为：
@媒体屏幕和屏幕（最大宽度：299px）{
.icon邮件：之前，.icon手机：之前，.icon日历：之前，.icon位置：之前，.item{
字体大小：2vw；
}
.标题{
字体大小：1.5vw；
}
}
@介质屏幕和（最小宽度：300px）和（最大宽度：799px）{
.icon邮件：之前，.icon手机：之前，.icon日历：之前，.icon位置：之前，.item{
字体大小：90%；
}
.标题{
字体大小：30%；
}
}
@媒体屏幕和屏幕（最小宽度：800px）{
.icon邮件：之前，.icon手机：之前，.icon日历：之前，.icon位置：之前，.item{
字体大小：5vw；
}
.标题{
字体大小：2vw；
}
}
我试着增加高度：50px；高度：自动；添加到标题和项目类。我已尝试在创建重复行后创建flexbox：
.联络(详情2){
显示器：flex；
证明内容：中心；
}
.项目2{
弹性：120em；
填充：0！重要；
}
.标题{
填充：0！重要；
}

呼叫
电子邮件
演播室
小时数

问题是

行高

，一旦我将其设置为0，我就能够消除空白。

问题是

行高

，一旦我将其设置为0，我就能够消除空白。

这里有一个指向我的网站的链接，其中出现了错误：就好像“容器”保持不变并且没有收缩，但是里面的内容是可以的。像图标是垂直对齐的：顶部，标题是垂直的：底部。我使用“px”引用图标和文本的文本大小，然后将媒体查询中的大小更改为“vw”。这与此有关吗？这里有一个指向我的网站的链接，其中出现了错误：好像“容器”保持不变，不会收缩，但其中的内容会收缩。像图标是垂直对齐的：顶部，标题是垂直的：底部。我使用“px”引用图标和文本的文本大小，然后将媒体查询中的大小更改为“vw”。这与此有关吗？嗨，菲利克斯，谢谢你给出答案，但我不知道你在哪里做了改动。我比较了我的代码和你的代码，它们看起来完全一样。我现在明白了，谢谢你让它们保持在同一行，只是图标和文本（标题）之间仍然有空格。谢谢你的尝试。嗨，菲利克斯，谢谢你给出了答案，但我不知道你在哪里做了修改。我比较了我的代码和你的代码，它们看起来完全一样。我现在明白了，谢谢你让它们保持在同一行，只是图标和文本（标题）之间仍然有空格。谢谢你的努力。

@font-face {
    font-family: 'debssite';
    src: url('fonts/debssite.eot');
    src: url('fonts/debssite.eot?#iefix') format('embedded-opentype'),
    url('fonts/debssite.woff2?') format('woff2'),
    url('fonts/debssite.woff?') format('woff'),
    url('fonts/debssite.ttf?') format('truetype'),
    url('fonts/debssite.svg?') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'debssite';
    src: url('./fonts/debssite.svg?#debssite') format('svg');
  }
}
*/

[class^="icon-"]:before, 
[class*=" icon-"]:before {
    font-family: "debssite";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-calendar:before { 
    content: "\e800"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-location:before { 
    content: "\e801"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-mail:before { 
    content: "\e802"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-facebook:before { 
    content: "\f09a"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-mobile:before { 
    content: "\f10b"; 
    font-size: 64px;
    color: #b31b1b;
    margin:0px;
} 
.icon-youtube:before { 
    content: "\f167"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-instagram:before { 
    content: "\f16d"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-pinterest:before { 
    content: "\f231"; 
    font-size: 32px;
    color: #b31b1b;
    margin:10px;
}