在响应式 div 或类 html/css3 之间减少 space

Question

我正在尝试创建一个网站，并且正在尝试实现响应式图标字体。我已经成功了（使用媒体查询）但是当屏幕改变时 space 开始显示并随着屏幕尺寸变小而增长。

Small Screen size - Large space between icon fonts and the text

Big screen size - small space between icon fonts and text

这是我的 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>

这里是上面HTMLdivs/classes的CSS3代码（.contact_details是容器）：

.contact_details{
    text-align: center;
}

.item {
    vertical-align: top;
    display: inline-block;
    width:auto;
    height:auto;
    margin:0% auto; 
    color: #b31b1b;
}

/* Text Below Icon Fonts*/

.caption {
    display: block;
    text-align: center;
}

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;
}

这是 icon-fonts 的代码，以防对某人有用：

@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;
}

如果您 help/comments 尝试解决此问题，我将不胜感激，即使您认为您的评论不会有帮助（可能有用！）。

谢谢，

理查德

创建了一个编辑以添加 icon-fonts 的代码。

Answer 1

.contact_details{
    text-align: center;
}

.item {
    vertical-align: top;
    display: inline-block;
    width:auto;
    height:auto;
    margin:0% auto; 
    color: #b31b1b;
}

/* Text Below Icon Fonts*/

.caption {
    display: block;
    text-align: center;
}
The CSS3 media queries code is:

@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;
    }
}
I have tried adding height: 50px; and height: auto; to the caption and item classes. I have tried creating a flexbox after creating a duplicate line:

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

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

.caption{
padding: 0!important;
}

<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>

Answer 2

问题是line-height，一旦我将它设置为0，我就能够消除白色space。

在响应式 div 或类 html/css3 之间减少 space

Reduce space between responsive div or classes html/css3

html

wordpress

css

icon-fonts

在响应式 div 或 类 html/css3 之间减少 space

Reduce space between responsive div or classes html/css3

html

wordpress

css

icon-fonts

在响应式 div 或类 html/css3 之间减少 space