bodyに入れても反映されない

調べてもわからなかったのでメモ


body {
    font-family: "Noto Sans JP", sans-serif;
    margin: 0;
    min-width: 1076px;
    color: red;
    box-sizing:border-box;
    
}

・bodyにcolorを入れたら文字が全部赤色になる

・body に box-sizingを入れても反映されない


box-sizingはボーダーを幅に含めるか含めないかのやつ

.works-list li img {
    width: 100%;
    border: 1px solid #000;
 
        box-sizing:border-box;
   
  
}

imgに直接入れたら反映された。

GPT曰く


問題は、box-sizing: border-box; を適用するべき要素が間違っていることです。

box-sizing: border-box; は、要素のボーダーやパディングを含んだ幅や高さを計算する際に使用されるプロパティです。したがって、border-box モデルを適用したい要素は、幅や高さに影響を与える要素である必要があります。

今回の場合、.works-list li img に border-box モデルを適用する必要があります。

まぁそういうことなんだろうけど理屈がわかるようなわからんような。

今後も出てきそうなのでメモ。

この記事が気に入ったらサポートをしてみませんか?