2017-08-13 67 views
3

我想删除不需要的white space我的html里面是media queries,我想知道它是如何出现的,当我的其他media queries没有它。有人能给我一个关于如何使用最佳实践摆脱这种情况的线索吗?在html中删除不必要的空白

这里的图片: enter image description here

下面的代码:

@media screen and (min-width: 768px) and (max-width: 991px){ 
      .logo { 
    width: 220px; 
} 
.gear { 
    position: absolute; 
    left:23%; 
    top:9px; 
    width: 10px; 
} 
.lightning { 
    position: absolute; 
    top:30px; 
    left:32%; 
} 
@-webkit-keyframes scale { 
    0%{ -webkit-transform: scale(0,0);} 
    100%{ -webkit-transform: scale(0.5,0.5);} 
} 
@-moz-keyframes scale { 
    0%{-ms-transform:scale(0,0);} 
    100%{-ms-transform: scale(0.5,0.5);} 
} 

@-o-keyframes scale { 
    0%{-o-transform:scale(0,0);} 
    100%{-o-transform: scale(0.5,0.5);} 
} 

@-ms-keyframes scale { 
    0%{-ms-transform:scale(0,0);} 
    100%{-ms-transform: scale(0.5,0.5);} 
} 

@keyframes scale { 
    0%{transform:scale(0,0);} 
    100%{transform: scale(0.5,0.5);} 
} 
.con { 
    margin-right: 0px; 
} 
.navbar-inverse .navbar-nav>li>a { 
    color: #949494; 
    padding-top: 47px; 
    padding-right: 0px; 
    font-weight: bold; 
    border-bottom: 3px solid transparent; 
    transition: border-bottom-color 0.5s ease-in-out; 
    -webkit-transition: border-bottom-color 0.5s ease-in-out; 
    font-size: 10px; 
} 
} 
+0

张贴您的完整的html和css在一起 – 2017-08-13 11:39:39

+0

@AbdullahAlemadi它是如此漫长,只有在特定的大小的空白显示。 – nethkennnnn

+0

你能演示链接吗? –

回答

1

首先它也取决于你编辑的缩进短键。 设想二是网上缩进,做谷歌的“网上CSS美化”,我做你的代码缩进从这个工具,也有很多在线工具可用,我的确从这个工具你的代码的缩进, http://www.cleancss.com/css-beautify/

@media screen and (min-width: 768px) and (max-width: 991px) { 
    .logo { 
     width: 220px; 
    } 
    .gear { 
     position: absolute; 
     left: 23%; 
     top: 9px; 
     width: 10px; 
    } 
    .lightning { 
     position: absolute; 
     top: 30px; 
     left: 32%; 
    } 
    @-webkit-keyframes scale { 
     0% { 
      -webkit-transform: scale(0, 0); 
     } 
     100% { 
      -webkit-transform: scale(0.5, 0.5); 
     } 
    } 
    @-moz-keyframes scale { 
     0% { 
      -ms-transform: scale(0, 0); 
     } 
     100% { 
      -ms-transform: scale(0.5, 0.5); 
     } 
    } 
    @-o-keyframes scale { 
     0% { 
      -o-transform: scale(0, 0); 
     } 
     100% { 
      -o-transform: scale(0.5, 0.5); 
     } 
    } 
    @-ms-keyframes scale { 
     0% { 
      -ms-transform: scale(0, 0); 
     } 
     100% { 
      -ms-transform: scale(0.5, 0.5); 
     } 
    } 
    @keyframes scale { 
     0% { 
      transform: scale(0, 0); 
     } 
     100% { 
      transform: scale(0.5, 0.5); 
     } 
    } 
    .con { 
     margin-right: 0px; 
    } 
    .navbar-inverse .navbar-nav>li>a { 
     color: #949494; 
     padding-top: 47px; 
     padding-right: 0px; 
     font-weight: bold; 
     border-bottom: 3px solid transparent; 
     transition: border-bottom-color 0.5s ease-in-out; 
     -webkit-transition: border-bottom-color 0.5s ease-in-out; 
     font-size: 10px; 
    } 
} 
+0

当我输入这个,它的工作。 – nethkennnnn

0

您是否尝试过在你的CSS文件中声明该 * {保证金:0;填充:0;}