css - div 以不存在的边距插入其他 div

Question

在我的个人网站上，我正在创建一个联系表。它在“业务查询”和“问题”之间切换。我已经设置了我的代码，以便 ID 为 contact_tabs 的选项卡与表单空间 contact_form 共享相同的 div。但是，这两个 div 不适合它们的容器 div(id 为 contact)。 contact_form 被 Chrome 的开发者控制台识别为额外边距的内容向下推，即使我已将边距设置为 margin:0;。

这是我的相关 CSS 样式和 HTML。

CSS:

/* Contact */
#contact {
    width:80%;
    border:3px outset #EFF;
    height:300px;
    margin:auto;
    margin-top:20px;
    margin-bottom:40px; 
}
#contact_tabs {
    width:30%;
    border-right:2px solid #FFF;
    height:100%;
    margin-right:0; 
}
#contact_tabs ul {
    margin-top:0;
    margin-bottom:0;
    padding-left:0;
    height:100%;    
}
#contact_tabs ul li {
    list-style-type:none;
    background-color:#111;
    height:50%;
}
#contact_tabs ul li a {
    font-size:20px;
    display:block;
    padding:63px 30px;
    color:inherit;
    text-decoration:none;
    transition:padding-left 0.5s;
    -webkit-transition:padding-left 0.5s;
    -moz-transition:padding-left 0.5s;
    -o-transition:padding-left 0.5s;
}
#contact_tabs ul li a:hover {
    padding-left:55px;  
}
#contact_tabs ul li.selected {
    background-color:rgba(255,255,255,0.8); 
}
#contact_tabs ul li.selected a {
    color:#111; 
}
#contact_form {
    width:70%;
    height:100%;
    float:right;
}

HTML:

<div id="contact">
    <div id="contact_tabs">
        <ul>
            <li class="selected" id="inquiry"><a href="#inquiry">Buisness inquiries</a></li>
            <li id="question"><a href="#question">Questions</a></li>
        </ul>
    </div>
    <div id="contact_form">
        <form id="inquryForm">
            <input type="text" placeholder="First Name" id="fname" />
        </form>
        <form id="questionForm">
            <input type="text" placeholder="First Name" id="fname2" />
        </form>
    </div>
</div>

Answer 1

正如 Interrobang 已经提到的，您可以将 box-sizing 添加到您的代码中。但是您还需要为 #contact_tabs 设置 float。

因此，更改您的 CSS 代码:

#contact_tabs
{
    width:30%;
    border-right:2px solid #FFF;
    height:100%;
    margin-right:0; 
}

到:

#contact_tabs
{
    width:30%;
    float:left;
    border-right:2px solid #fff;
    height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

DEMO