Html div填充有问题吗？

我已经创建了一个div。在div标签中，我写了一些文本框和单选按钮。现在div内容非常接近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:

性别

男性
女性
父亲的名字
母亲的名字
出生日期

尝试以下操作

.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;
}

您可以在包装器（

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>

---

只是做一个简单的例子可能会对我们有所帮助为什么不在容器中添加填充：padding:0 5px？如果添加填充物，盒子的宽度将达到100%+填充物。为了避免这种情况，添加

框大小：边框框到您的
.docsDiv
。或最好简单地添加填充并删除
width:100%
-
div
s是块元素，因此将延伸到整个可用宽度。如果您不想让
div
s的两侧有空间，只需为这些元素添加等于
div
填充的负边距即可。例如，
.docsDiv{padding:0 1em；}
和
.docsDiv input{margin:0-1em；}
如果我添加右侧未正确显示，它将脱离屏幕。应阅读完整答案，您必须添加
框大小：边框框如果有任何问题，请立即联系我
<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>

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