Q&A
とりあえず編集や削除がでてこないので、それが確認できるソースを記載ください
h()が宣言されてない感じ？
PHPを排除して生のHTMLで提示されることをおすすめします
formの上部に余白ができていて、それを消したいのでアドバイスお願いします
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <link rel="stylesheet" href="/css/styles.css"> 5 <meta charset="utf-8"> 6 <title>メインページ</title> 7 <h1>掲示板へようこそ</h1> 8 </head> 9 <body> 10 <section> 11 <h2>新規投稿</h2> 12 <!-- 書き込み用フォーム --> 13 <form action="" method="post"> 14 <label for="title">タイトル</label><br> 15 <input type="text" name="title" id="title"><br> 16 <button type="submit">部屋を立てる</button> 17 <input type="hidden" name="token" value=""> 18 </form> 19 </section> 20 <section> 21 <h2>投稿一覧</h2> 22 <p>現在の投稿は<span></span>件です</p> 23 <div class="container"> 24 <div class="linkbox"> 25 <a href='threads.php?boards_id=?>'> 26 27 </a> 28 </div> 29 <div class="button"> 30 <form action="change.php" method="get"> 31 <button type="submit" name="boards_id">編集</button> 32 </form> 33 <form action="delete.php" method="get"> 34 <button type="submit" name="boards_id">削除</button> 35 </form> 36 </div> 37 </div> 38 <p>投稿はまだありません。</p> 39 </section> 40 </body> 41</html> 42
css
1h1,h2{ 2 text-align:center; 3} 4 5form{ 6 text-align:center; 7} 8 9body{ 10 margin:0; 11} 12 13.error{ 14 color:red; 15} 16 17.container{ 18 display:flex; 19} 20.button{ 21 background: red; 22 23} 24 25.linkbox{ 26 background-color:#ffeecc; 27 width:100%; 28 padding:20px; 29 position:relative; 30} 31 32.linkbox a{ 33 position:absolute; 34 height:100%; 35 width:100%; 36} 37 38.linkbox:hover{ 39 background:#ffee; 40} 41
編集、削除が出てこないとはどういうことでしょう
編集、削除ボタンなら一番したのformにあります
h()は宣言されています
ご自身のソースを単純にコピペしてみてください
「h()なんて関数無いよ」というエラーが出ていることが確認できます
Call to undefined function h()
指摘したとおり、HTMLで提示すれば済む話です
あと、提示のCSSにbuttonに関する設定は何もないです。そのCSSでは画像のようなボタン表示にはなりません。
要は、画像のような症状が再現できる生のHTMLとCSSを提示してもらわないと回答のしようがないということです。
ご提示いただいているスタイルレイアウトのスクリーンショットは、どの要素を調査したものですか？
htmlで提示し直しました
formの要素です
どうなっていることが問題で、どのような表示なることがお望みなのですか？
期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3
結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1
つまり、「flexboxの高さが合わない」は無視してかまわないのか、ということを聞いています。
余白があるから高さが合わないの意味での高さが合わないでした
要素内の余白が消えるのであれば無視して構いません
回答4件
0
Chrome と Firefox で確認。
css
1 .button button{ 2 display: block; 3 border: none; 4 }
投稿2020/03/02 02:49
総合スコア36158
0
ベストアンサー
これはbutton要素がデフォルトでdisplay:inline-block;であることが原因です。
先に解決方法を回答いたします。2通りありますのでお好みでどうぞ。
CSS
1button { 2 display: block; 3}
または
CSS
1button { 2 vertical-align: bottom; 3}
どちらか適用してもらえば余白は消えると思います。
なぜ余白が発生するのかというと、inline-block;というのは「外部にはinline（文字）の様に振る舞うブロック要素」で、デフォルトがvertical-align: baseline;だからです。
詳しく説明すると大変長くなってしまうので是非検索して調べてみてくださいね。
投稿2020/03/02 02:54
編集2020/03/02 03:47
総合スコア134
なるほど、display:inline-block; だと余白が発生するというのは知ってましたが、ボタンも該当しますね。
私の回答のCodepenサンプルでは余白が発生しないのはなぜでしょうか。
codepenのリンクを拝見しましたが、私の環境では余白が発生していました。
もしかするとブラウザやOSごとに解釈が微妙に違うのでしょうか…？
私の環境はmacOS 10.13.6のGoogleChromeから見ています。hatena19さんの環境も教えていただいてよろしいですか？
Windows10 の Chrome です。環境依存の現象ということですね。
FireFoxで確認したら上下左右に微妙に余白が発生しました。
原因わかりました。
inline-blockがbaselineの基準に取るのは親要素のbaselineです。つまり親要素のフォントのbaselineを参照します。
windows10ではメイリオを、macOSではヒラギノ角ゴをbaselineの参照しているので差が生じたようです（たしかwindowsのfirefoxはデフォルトでMSゴシックとかが指定されていたはず）。
試しに親要素のformタグに違うfont-familyを指定してみてください。余白が発生すると思います。
0
ChromeでCodepenでサンプルを作成して確認しましたが、提示のHTMLとCSSだけでは症状は再現できませんでした。
とりあえず下記のCSSを追加してしみたらどうなりますか。
css
1button { 2 margin: 0 !important; 3}
検証サンプル画像
投稿2020/03/02 02:24
編集2020/03/02 02:58総合スコア33790
症状は再現できませんでした。
とありますが、hatena19さんはどのようになったのですか？
追加しても変わりませんでした
> hatena19さんはどのようになったのですか？
回答にサンプルの画像とCodepenリンクを追加しておきました。
ありがとうございます
これがしたかったです！
開発環境によって表示され方に違いがあるのでしょうか？
kim tomさんのも参考にします
OS ブラウザ によって表示のされかたが異なることはよくあることなので、いろいろな環境が確認する必要はありますね。
あなたの回答
tips
プレビュー
