質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1152閲覧

htmlフォームに自動的にできる余白を消したい

MsParrot

総合スコア4

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/05/01 05:59

掲題のとおり、htmlフォームのlabel・input要素周辺に自動的にできる余白を消す方法を探しています。

試してみたこと:label及びinput にmargin: 0;を適用してみましたが効果はありませんでした。

html

1 2 <form action="index.html" id="enquiry-form" method="post"> 3 <div class="enquiry-type"> 4 <label class="main-label" for="enquiry-type">お問い合わせ種別</label> 5 <span class="required">必須</span> 6 <div class="radio-btns"> 7 <input class="radio-input" type="radio" id="web-dev" name="enquiry" value="web-dev" required> 8 <label class="type-option" for="web-dev">制作依頼</label><br> 9 <input class="radio-input" type="radio" id="job-application" name="enquiry" value="job-application"> 10 <label class="type-option" for="job-application">採用</label><br> 11 <input class="radio-input" type="radio" id="investor" name="enquiry" value="investor"> 12 <label class="type-option" for="investor">IR</label><br> 13 <input class="radio-input" type="radio" id="other" name="enquiry" value="other"> 14 <label class="type-option" for="other">その他</label> 15 </div> 16 </div> 17 18 <div class="organization"> 19 <label class="main-label" for="organization">会社名・団体名</label><br> 20 <input class="short-text" type="text" id="org-name"> 21 </div> 22 23 <div class="name"> 24 <label class="main-label" for="name">お名前</label> 25 <span class="required">必須</span><br> 26 <input class="short-text" type="text" id="name" required> 27 </div> 28 29 <div class="email-address"> 30 <label class="main-label" for="email">メールアドレス</label> 31 <span class="required">必須</span><br> 32 <input class="short-text" type="email" id="email" required> 33 </div> 34 35 <div class="phone-number"> 36 <label class="main-label" for="phone-number">電話番号</label><br> 37 <input class="short-text" type="number" id="telephone"> 38 </div> 39 40 <div class="enquiry-content"> 41 <label class="main-label" for="content">お問い合わせ内容</label> 42 <span class="required">必須</span><br> 43 <textarea type="text" id="content" required></textarea> 44 </div> 45 </form>

scss

1 form { 2 width: 90%; 3 min-height: 939px; 4 margin: 0 auto; 5 6 @media screen and (min-width: 375px){ 7 width: 345px; 8 } 9 10 .main-label { 11 font-family: YuGothic; 12 font-weight: bold; 13 font-size: 16px; 14 letter-spacing: 0em; 15 line-height: 94px; 16 text-align: left; 17 color: #333; 18 } 19 20 .required { 21 display: inline-block; 22 background-color: #333; 23 color: #fff; 24 font-size: 12px; 25 padding: 0 5px; 26 margin-left: 6px; 27 transform: translateY(-2px); 28 } 29 30 .enquiry-type { 31 32 .radio-btns { 33 34 .radio-input { 35 height: 20px; 36 width: 20px; 37 border: #333 solid 1px; 38 border-radius: 50%; 39 transform: translateY(3px); 40 cursor: pointer; 41 position: relative; 42 43 &:checked{ 44 text-decoration: none; 45 } 46 } 47 48 .main-label { 49 margin-bottom: 20px; 50 } 51 52 .type-option { 53 font-family: YuGothic; 54 font-weight: 500; 55 font-size: 16px; 56 letter-spacing: 0em; 57 text-align: left; 58 color: #333; 59 margin-bottom: 15px; 60 } 61 } 62 } 63 64 .short-text { 65 width: 345px; 66 height: 48px; 67 background: #fff; 68 border: 1px solid #333; 69 } 70 71 textarea { 72 width: 345px; 73 height: 210px; 74 background: #fff; 75 border: 1px solid #333; 76 } 77 } 78

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

form .main-labelline-height: 94px; これが、おっしゃっている「余白」になっていると思われます。

投稿2021/05/01 06:20

itagagaki

総合スコア8402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MsParrot

2021/05/01 06:23

解決しました!ありがとうございました。
guest

0

こうするとどうでしょうか?

css

1.radio-btns { 2 font-size: 0; 3}

投稿2021/05/01 06:17

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MsParrot

2021/05/01 06:24

ありがとうございました。line-heightをコピペで指定してしまっていたのが原因だったようです。
Lhankor_Mhy

2021/05/01 06:26

ああ、上下のことだったのですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問