labelタグにCSSが効かない原因と修正方法

labelタグはinputタグとセットで使用し、inputのタイトルを示すものです。

また、inputのクリックできる範囲を大きくするためにlabelを使うことがあります。

しかし、labelタグにCSSが効かず思ったようにデザインできない!?

そんな「labelタグにCSSが効かない原因と修正方法」を説明します。

　

↓label forが効かないかたはこちら

結論

labelタグにdisplay: inline-block またはdisplay:block を指定しましょう。

labelはinline要素です。inline要素はwidthやmarginといった一部のCSSが効きません。
これらのCSSを効かせたい場合display: inline-blockまたはdisplay:blockを使いましょう。

以下で例を挙げながら詳しく説明します。

成功例

テキスト

html

<input type="checkbox" id="aaa"><label class="example" for="aaa">テキスト</label>

CSS

.example{
    display: inline-block;
    margin: 30px 0;
    width: 200px;
    background: #97ede0;
    padding: 10px;
    cursor: pointer;
}

上記成功例の場合はdisplay: inline-blockを指定しており、widthもmarginも効いています。

失敗例

テキスト

html

<input type="checkbox" id="bbb"><label class="example2" for="bbb">テキスト</label>

CSS

.example2{
    /*display: inline-block;*/
    margin: 30px 0;
    width: 200px;
    background: #97ede0;
    padding: 10px;
    cursor: pointer;
}

上記失敗例ではdisplay: inline-blockをコメントアウト つまり 効かないようにしています。これでlabelはinline要素になります。

するとwidthとmarginが効かなくなります。

その他

上記にも当てはまらない場合、他が原因かもしれません。
↓こちらの記事を参考にしてみてください。

まとめ

labelタグにCSSが効かない原因はlabelがinline要素だから。
修正方法はlabelにdisplay: inline-block またはdisplay:block を指定すること。

以上、labelタグにCSSが効かない原因と修正方法でした。