font-size: 0 ; CSS 적용이 안될때 확인해야되는부분은 어떤 것인가요?

안녕하세요
폰트사이즈 0 CSS 적용이 안되는 이유는 무엇인가요??

@charset 'utf-8';

body {

    margin: 0;

    font-size: 12px;

    color: #222;

    line-height: 1.6em;

    background-color: #fff;

}

a {

    text-decoration: none;

    color: #222;

}

.container {

    border: 1px solid red;

    width: 1200px;

    margin: auto;

}

header {

    /*overflow: hidden;*/

    height: 100px;

    position: relative;

    width: 1200px;

}

header > div {

    border: 1px solid blue;

    height: 100px;

}

.header-logo {

    width: 200px;

    float: left;

}

.navi {

    width: 600px;

    float: right;

}

.slide {}

.slide > div {

    border: 1px solid green;

}

.items {

    overflow: hidden;

}

.items > div {

    border: 1px solid pink;

    height: 200px;

    float: left;

    box-sizing: border-box;

}

.news {

    width: 400px;

}

.gallery {

    width: 400px;

}

.shortcut {

    width: 400px;

}

footer {

    overflow: hidden;

}

footer > div {

    border: 1px solid blue;

    height: 100px;

    float: left;

    box-sizing: border-box;

}

.family-site {

    width: 200px;

}

.copyright {

    width: 1000px;

}

.copyright div {

    border: 1px solid green;

    height: 50px;

}

/*탭콘텐츠*/

.tab-inner,

.gallery-inner{

    width: 95%;

    margin: auto;

}

.tab-inner .btn{}

.tab-inner .btn span,

.gallery-inner .btn span{

    border: 1px solid #000;

    display: inline-block;

    width: 100px;

    text-align: center;

    padding: 5px;

    border-radius: 5px 5px 0 0;

    border-bottom: none;

    background-color: #fff;

    margin-bottom: -1px;   

}

.tab-inner .tabs,

.gallery-inner .tabs{

    border: 1px solid #000;

    padding: 0 5px;

    height: 150px;

}

.tab-inner .tabs a{

    display: block;

    padding: 2px;

    border-bottom: 1px solid #333; 

}

.tab-inner .tabs a:last-child{

    border-bottom: none;

}

.tab-inner .tabs a b{

    float: right;

    font-weight: normal;

}

.gallery .tabs {

    text-align: center;

    padding-top: 20px;

    box-sizing: border-box;

}

.gallery .tabs img{

    width: 110px;

}

/*네비*/

.menu{

    list-style: none;

    padding: 0;

    margin-top: 50px;

}

.menu li{

    width: 25%;

    float:left;

    text-align: center;

    box-sizing: border-box;

}

.menu li > a  {

    border: 1px solid #000;

    display: block;

    padding: 5px;

    background-color: #fff;

    transition: 0.5s;

    color: #000;

}

.menu li:hover > a{

    background-color: #000;

    color: #fff;

}

.sub-menu{

    display: none;

}

.sub-menu a{

    display: block;

    padding: 5px;

    transition: 0.5s;

    color: #fff;

    background-color: #000;

}

.sub-menu a:hover{

    background-color: #fff;

    color: #000;

}

.sub-back {

    background-color: #000;

    height: 150px;

    width: 1200px;

    position: absolute;

    right: 0;

    top: 100%;

    z-index: -1;

    display: none;

}

/*세로 슬라이드*/

.slide{

    position: relative;

    width: 1200px;

    height: 300px;

}

.slide div{

    border: 5px solid red;

    position: absolute;

    font-size: 0;

    top: 0;

    left: 0;

}

@keyframes slide {

    0%{}

    30%{}

    35%{}

    65%{}

    70%{}

    95%{}

    100%{}

}