[css]子要素の幅に合わせたdisplay:block;の設定方法

width:auto;の画像のラッピングに丁度良く助かる。

事前知識

display:block;を付与すると、widthを指定しない限り幅はブラウザいっぱいになる。

「子要素に合わせる」をやりたい場面はあるんだけど、幅を数値で指定できない事がある。

例えばこんな感じ。

<a>
    <img>
</a>

a{
    display: block;
    img{
        width: auto;
        height: 100px;
        display: block;
    }
}

<img>に合わせて親要素の<a>をかっちり整形したいんだけど、<img>は高さ準拠でサイズ指定してあるから<a>にwidthを振りようがない。display:block;はheightは自動で子要素に合わせられるけど、widthはそうはいかないよね、という話。

これで解決

    width: fit-content;
    display: block;

「fit-content」を与えたら子要素に合わせてくれる。

よかったですね。