掲題のとおり、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
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/01 06:23