css spect test

by bakhshi

HTML

<div class="container"><span>this</span><span>is a test</span></div>

<div class="font-container container">
    <div class="marker">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
    <div class="first">test: 2em
        <div class="inner">inner test: 2em</div>
    </div>
    <div class="first ex-font-size">test -2ex
        <div class="inner ex-font-size">inner test 2ex</div>
    </div>    
    <div class="second">second
        <div class="inner">second inner</div>
    </div>
</div>

CSS

.container{
    border:solid 1px blue;
}

span{
    margin:20px;
    color:red;
}
/*font*/
.font-conainer{
    font:14px;
}
.font-container .first, .font-container .first .inner{
    font-size: 2em;
}

.font-container .second{
    font-size:2em;
}
.font-container .second .inner{
    font-size: inherit;
}
.font-container .ex-font-size{
    font-size:2ex;
}
.font-container .marker{
    float:left;
    word-wrap:break-word;
    width:1ex;
    line-height:1ex;
}