pタグのサイズ指定について

Question

下記コードのcard-box,cardboxedのpタグにfont-size20pxを指定しているのですが、
web上で確認およびグーグルのデベロッパーツールでは30pxと表示されてしまいます????

なぜcssで20pxと指定しても表示が30pxになってしまうのでしょうか？
どこが悪いのでしょうか？？
添付画像も見ていただけるとわかりやすいかと思います！

<main>
        <div class="main-card">

        
                <div class="card-boxed">
                    <img class="imgdayo" src="https://placehold.jp/310x161.png">
                    <h3>テキストテキスト</h3>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            

            
                <div class="card-box">
                    <img class="imgdayo" src="https://placehold.jp/310x161.png">
                    <h3>テキストテキスト</h3>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            

                <div class="card-box">
                    <img class="imgdayo" src="https://placehold.jp/310x161.png">
                    <h3>テキストテキスト</h3>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            

       
                <div class="card-boxed">
                    <img class="imgdayo" src="https://placehold.jp/310x161.png">
                    <h3>テキストテキスト</h3>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            

                <div class="card-box">
                    <img class="imgdayo" src="https://placehold.jp/310x161.png">
                    <h3>テキストテキスト</h3>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            

            
                <div class="card-box">
                    <img class="imgdayo" src="https://placehold.jp/310x161.png">
                    <h3>テキストテキスト</h3>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            

        </div>
    </main>

.main-card{
    height:1130px;
    background-color: #EFEFEF;
    color:black;
    
   
}

.card-box,.card-boxed{
 
    height: 355px;
    width: 342px;
    float: left;
    background-color: #FFFFFF;
    margin-left: 30px;
    margin-bottom: 20px;


    
}

.card-boxed{
    margin-left: 140px!important;
}

.imgdayo{
    display: block;
    margin: 0 auto;
}

.card-box p,.card-boxed p{
    font-size: 20px;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 20px;
    margin-bottom: 28px;
}

.card-box h3,.card-boxed h3{
    font-size: 20px;
    margin: 20px 0px 0px 16px;
}

Comments

[yoshinavi]

提示のコードでは、提示の画像のような表示になりません。
画像では、親要素からのハミ出しや、floatによる画像引き込み等が見られますが、提示コードではそれらの症状が出ていませんので、別コードで提示されているのではないのでしょうか？確認してください。

Answer 1

書かれたコードでは再現せず、pのfont-sizeは20pxで描画されています（CodePen）。

これ以外にCSSを指定している場合、そちらの影響ということが考えられます。

Comments

[hideprog]

これ意外と言うのはpタグに対しての他に指定しているcssと言うことでしょうか？

[maisumakun]

ブラウザの設定ということも考えられますので、ブラウザを変える、プライベートモードにするなどでどうなるか確認してみたほうがいいかもしれません。

[cerfweb]

横から失礼します。
可能性としては div.main-card p { font-size: 30px !important; } のようにどこかで指定されていたらそちらの方が優先度が高くなりますのでご確認ください。

Answer 2

再現するコードがなければ想像でしか言えませんが、たとえば animation の結果フォントサイズが変わっていればそうなります。

Answer 3

!important; を使用してみてはどうでしょうか