调整输入框与下拉框内边距，解决表单元素对齐异常问题

问题分析 #

当前表单存在三个核心样式问题：

1. <select>和<textarea>与<input>的padding不一致，位置偏移，且min-height:2em未生效——原因是浏览器对这两类元素有默认样式，且未设置box-sizing导致宽度计算异常。
2. 部分label文本偏右——原因是为特定label设置了padding:10px，导致整个label容器内边距偏移了文本位置。
3. <textarea>的样式问题与<select>一致，同样受默认样式和宽度计算影响。

解决方案 #

通过统一表单元素样式、调整label布局、重置浏览器默认样式来解决所有问题，以下是修改后的代码：

修改后的CSS #

body{
    background-color: #041f43;
    color: #041f43;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1, p{
    color: white;
    text-align: center;
    margin-top: 50px;   
}

form{
    max-width: 500px;
    min-width: 300px;
    border-radius: 10px;
    background-color: white;
    margin: 50px auto;
    padding: 40px;  
}

.group{
    margin: 0 auto 1.25rem auto;
}

#name-label, #email-label, #number-label, #selection-label{
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
}

input, textarea, select{
  margin: 0 0 1.25rem 0;
  min-height: 2em;
  width: 100%;
  padding: 0.5em;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

label{
    display: block;
}

legend{
    margin-bottom: 5px;
    font-weight: bold;
}

.inline {
    width: unset;
    vertical-align: middle;
    display: inline;
    margin-right: 0.5rem;
    margin-bottom: 0;
  }

input[type="submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #9494dd;
    border-color: white;
    color: white;
    min-width: 300px;
    padding: 0;
  }

修改后的HTML #

<h1 id="title">Welcome!</h1>
<p id="description">We're here to help you with your tasks!</p>

<form id="survey-form">

    <div class="group">
        <label id="name-label">Name:</label>
        <input id="name" class="group1" type="text" placeholder="Enter your name" required/>

        <label id="email-label">E-mail:</label>
        <input id="email" class="group1" type="email" placeholder="Enter your e-mail" required/>

        <label id="number-label">Age (optional):</label>
        <input id="number" class="group1" type="number" min="13" max="100" placeholder="Enter your age"/>

        <label id="selection-label">Select your age:</label>
        <select id="dropdown" class="group1">
            <option value="selectOne">Select one</option>
            <option value="socialMedia">Social media</option>
            <option value="podcast">freeCodeCamp Podcast</option>
            <option value="friend">Friend</option>
            <option value="other">Other</option>
        </select>
    </div>

    <div class="group">
        <legend id="recommendation">Would you recommend us to a friend?</legend>
        <label for="radio1">
            <input id="radio1" class="inline" type="radio" name="purpose" value="yes" checked/>
            Of course!
        </label>
        <label for="radio2">
            <input id="radio2" class="inline" type="radio" name="purpose" value="no"/>
            I don't think so
        </label>
        <label for="radio3">
            <input id="radio3" class="inline" type="radio" name="purpose" value="maybe"/>
            Maybe
        </label>
    </div>

    <div class="group">
        <legend>Would you like to receive more information?</legend>
        <label for="radio4">
            <input id="radio4" class="inline" type="checkbox" name="" value="newsletter" checked/>
            Newsletter
        </label>
        <label for="radio5">
            <input id="radio5" class="inline" type="checkbox" name="purpose" value="discounts"/>
            Discounts
        </label>
        <label for="radio6">
            <input id="radio6" class="inline" type="checkbox" name="purpose" value="teamChallenges"/>
            Team Challenges
        </label>
        <label for="radio7">
            <input id="radio7" class="inline" type="checkbox" name="purpose" value="dailyChallenges"/>
            Daily Challenges
        </label>
    </div>
    
    <div class="group">
        <legend>Do you have any comments or questions?</legend>
        <textarea rows="10" class="fieldset1"></textarea>
    </div>
    
    <input id="submit" type="submit"/>

</form>

关键修改说明 #

1. 统一表单元素样式：

   • 给input, textarea, select添加box-sizing: border-box，确保width:100%不会超出父容器范围
   • 统一设置padding:0.5em和边框样式，覆盖浏览器默认样式，让三类元素视觉一致
   • 调整margin值，确保元素间距统一，min-height:2em正常生效

2. 修复label文本对齐：

   • 将输入框移出label标签，让label单独显示文本，避免容器内边距影响文本位置
   • 去掉原label的padding:10px，改为用margin-bottom控制label与下方输入框的间距，保证文本左对齐

3. 优化textarea和单选/复选框：

   • 移除textarea的cols属性，完全通过CSS控制宽度
   • 调整单选/复选框的布局，将input放在文本前，更符合用户交互习惯，同时修正.inline类的margin避免间距异常

内容的提问来源于stack exchange，提问作者PalmerTF