div填充问题？

Question

我创建了一个div。在div标签中，我写了一些文本框和单选按钮。现在div内容非常接近div margin但是我需要在左侧和右侧有一些空间。我需要在黄色标记之间开始和结束div内容。蓝色标记是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;
}

Answer 2

尝试以下

.docsDiv
{
    position: relative;
    width: 100%;
    padding: 0px 15px; **/*Changed*/**
    box-sizing:border-box; **/*Added*/**
    background: #FFFFFF;
    border: #C0C0C0 groove 1px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

<强> DEMO