みかづきブログ その3

3ヶ月つづけてみました。

inline-blockで横並びにする際はfont-sizeにも気を配る

親要素からの縦位置と、(改行している際は)要素同士の横の間隔に関係してきます。

SCSS

@import "compass/reset";

.btns {
    width: 100%; height: 30px;
    background: #6e6e6e;
    text-align: center;
    
    &:nth-child(odd) {
        background: #3e3e3e;
    }
        
    &:nth-child(1) {
        font-size: 0px;
    }

    &:nth-child(2) {
        font-size: 10px;
    }

    &:nth-child(3) {
        font-size: 15px;
    }

    &:nth-child(4) {
        font-size: 20px;
    }

    &:nth-child(5) {
        font-size: 25px;
    }
        
    &:nth-child(6) {
        font-size: 30px;
    }
}

.btn {
    display: inline-block;
    margin: 0;
    border-radius: 50%;
    width: 5px; height: 5px;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
}

DEMO