HTMLにstyleを直接指定する場合とHTMMLにclassを指定してcss側でstyleを設定するときの挙動

Question

HTMLにstyleを直接指定する場合

　<!-略->
　<table>
    <tr>
      <th class="table-header" style="padding-top: 0px; padding-bottom: 0px;"><!--指定箇所-->
        <label class="label-m" style="">hoge</label>
      </th>
      <td>
        <label class="label-m" style="">hoge</label>
      </td>

      <th class="table-header" style="">
        <label class="label-m" style="">huge</label>
      </th>
      <td>
        <label class="label-m" style="">huge</label>
      </td>
    <tr>
  <table>　

HTMLにclassを指定しcssでstyleを設定する場合

　<!-略->
　<table>
    <tr>
      <th class="table-header" style="">
        <label class="label-m" style="">hoge</label>
      </th>
      <td>
        <label class="label-m" style="">hoge</label>
      </td>
　
　　　<th class="table-header" style="">
        <label class="label-m" style="">huge</label>
      </th>
      <td>
        <label class="label-m" style="">huge</label>
      </td>
    <tr>
  <table>　

.table-header{
  padding-top: 0px;
  padding-bottom: 0px;
}

上記の二つに違いはないという認識なのですが、（認識誤ってたらすいません）
HTMLにstyleの直接指定した場合hogeの上下のpaddingが0に設定され
th,tdの要素のhogeの上下に余白ができないよう設定できるのですが、
HTMLにclassを指定しcssでstyleを設定する場合の実装では
hogeの上下のpaddingを0に指定しているのにもかかわらず、
hoegの上下に余白が10px存在します。

hoge一つのみならば直接指定でよい気がしますが、
hugeやそれ以外にも<td><th>要素がある場合
全てのstyleを直接指定するわけにもいかず困っております。

よろしくお願いします。

Comments

[dit.]

最後の<tr>と<table>は</tr>と</table>かと思いますが、転記の際のミスでしょうか？実際のコードもご確認ください。

[King_of_Flies]

転記ミスです。すいません。

Answer 1

指定のスタイル以外に、何かしら別のスタイルシートが適用されていませんか？Developer Toolsなどで確認してみましょう。

上記の二つに違いはないという認識なのですが、（認識誤ってたらすいません）

詳細度が違ってきて、style属性でかけたスタイルは、!importantを除けば最優先で適用されます。

Comments

[King_of_Flies]

.table-header{
padding-top: 0px !important;
padding-bottom: 0px !important;
}
で指定したところstyleの適用がされました。

少し上位層の要素のstyleの見直しをしたいと思います。

ありがとうございました。

[dit.]

ディベロッパーツールなどを利用して、どのスタイルが当たっているか確認してみてください。
https://nandemo-nobiru.com/2944/

Answer 2

css は優先順位について色々ルールがあります。

• タグに直接 style="" で書く方が、class="" で指定するより強い（優先される）

• #hoge {} のように id で指定する方が、.fuga {} のように class で指定するより強い

• .hoge {} の指定よりも .main .list div.hoge {} のようにより細かく指定されている方が強い

• !important が付いている方が、付いていないより強い

• 同じ強さだったら、先に書かれているものより 後に書かれている者の方が強い（後勝ち）

（上記は例です。詳細については別途調べてみてください）

思うに 共通の css 部分により強い指定があって、それに負けているのではないでしょうか？

---

たとえば

• <table> に class="my-table" のように class を指定してみる
• table.my-table th.table-header のような指定に変えてみる

など試してみてはどうでしょうか。