html - div 填充有问题吗？

Question

我创建了一个 div。在 div 标签中我写了一些文本框和单选按钮。现在 div 内容非常接近 div margin 但我需要在左侧和右侧留出一些空间。我需要在黄色标记之间开始和结束 div 内容。蓝色标记是 div 边距。

分区 CSS:

.docsDiv
{
  position: relative;
  width: 100%;
  padding: 0px;
  background: #FFFFFF;
  border: #C0C0C0 groove 1px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

HTML:

<div class="docsDiv">
  <p> Gender</p>
  <input type="radio" name="gender" id="gender_1" />
  <label for="gender_1">Male</label>
  <input type="radio" name="gender" id="gender_2" />
  <label for="gender_2">Female</label>

    Father's Name   
    <input type="text" name="fatherName" id="fatherName">   

    Mother's Name
    <input type="text"  name="motherName" id="motherName">  

    Date of Birth
    <input type="text" id="dateofbirth">        
</div>

Answer 1

Demo您可以在包装器 (docsDiv) 内添加一个带有填充的 div，以将其他元素向内推。

<div class="docsDiv">
    <div class="padding-20">
        <p> Gender</p>
        <input type="radio" name="gender" id="gender_1" />
        <label for="gender_1">Male</label>
        <input type="radio" name="gender" id="gender_2" />
        <label for="gender_2">Female</label>

        Father's Name   
        <input type="text" name="fatherName" id="fatherName">   

        Mother's Name
        <input type="text"  name="motherName" id="motherName">  

        Date of Birth
        <input type="text" id="dateofbirth">
    </div>      
</div>

CSS

.padding-20 {
     padding: 0 20px;
}