Rails 7, button_toで生成した要素のスタイリング方法

Question

Ruby 3.0.3, Rails 7.0.0でリストを管理するアプリを開発中です。
スタイリングにはbootstrap５を使用しています。

リストの項目を削除するために以下のようにボタンを作成しました。

<%= button_to "Destroy", friend, method: :delete, class: "btn btn-link lh-1 p-0" %></td>

このようにclassを持たせることでボタンのスタイリングをしています。
このボタンを表の中に置いているのですが出力をすると隣のテキストと高さが違うことに気づきました。

どうやら原因はbutton_toでボタンを作った際にボタンの親要素としてformも自動で作られてしまい、
そのformが高さを持っているようでした。以下はchromeでの出力コードです

<form class="button_to" method="post" action="/friends/14">
     <input type="hidden" name="_method" value="delete" autocomplete="off">
     <button class="btn btn-link lh-1 p-0" type="submit">Destroy</button>
     <input type="hidden" name="authenticity_token" value="jQL134b-njDXvGvondPud4k67HREWFNF8zKtO-adqLQqRqp7NjW1ijdJoqni8uKwvlHQjdvJMjWZGRUGNujyQQ" autocomplete="off">
</form>

このform.button_toの高さを中身のbuttonと一致させるためにはどのように設定すればよいのでしょうか？
新たにcssファイルを作り.button_toを直接スタイルするしか方法はないのでしょうか？

代替案としてbutton_toをlink_toに置き換えて実装を試みましたが、friendのviewページに飛んでしまい削除の機能を持たせることができませんでした。こちらはまた別の問題になると思いますので、質問投稿を別途用意したいと思います。（もし上記の情報だけで解決策がわかるようでしたら教えていただけると大変助かります。)

Answer 1

.btn クラスが vertical-align: middle; を持ってるので、高さがズレて見えるんじゃないかと思います。

以下のように align-text-top （または align-baseline ）を追加してみてはどうでしょうか？

- button_to ... , class: "btn btn-link lh-1 p-0"
+ button_to ... , class: "btn btn-link lh-1 p-0 align-text-top"

Comments

[退会済みユーザー]

ありがとうございます。無事に解決することができました。