删除父div的边框时,子div丢失其边距

时间:2013-09-16 11:37:33

标签: css html

我有一个div #login_container,其中我有另一个div #login,他们都在另一个div #block_2内。 border周围的#login_container一切正常,但是,当我删除其边框时,其子div(即#login)会丢失其边距,其所有文本和其他内容都会触及#login_container。我只是在学习HTML和CSS,请纠正我,如果我错了,请帮助我如何让#login div保留其余量。谢谢。

#login_container div没有边框:

Without border in the login container

带#login_container div的边框:

With border in the #login_container

.html的片段:

        <div id="block_2">
            <div id="login_container" class="div">
                <div id="login">
                    <p>Email Address</p>
                    <input type="text">
                    <p>Password</p>
                    <input type="password">
                    <p>Password</p>
                    <input type="password">
                    <p><input type="checkbox" name="agreement">I have read and agree to the terms of service</input></p>
                </div>
            </div>
        </div>

.css的片段:

#block_2 {
    width: 1120px;
    margin: 0px auto;
}

#login_container {
    width: 400px;
    height: 400px;
    margin: 0px 600px;
    border-radius: 30px;
}

.div {
    background:rgb(0,0,0);
    background: transparent\9;
    background:rgba(0,0,0,0.3);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c00    0000);
    zoom: 1;
}
.div:nth-child(n) {
    filter: none;
}

#login {
    width: 350px;
    margin: 20px auto;
}

#login_container p, input{
    font-weight: bold;
    font-style: italic;
    margin: 10px;
    color: white;
    font-size: 20px;
}

1 个答案:

答案 0 :(得分:0)

http://jsbin.com/azudAzO/1/edit

#block_2 {
    width: 1120px;
    margin: 0px auto;
}

#login_container {
    position:relative; 
    left:600px;  
    width: 400px;
    height: 400px;
    border-radius: 30px;
    padding:20px 35px;
}

.div {
    background:rgb(0,0,0);
    background: transparent\9;
    background:rgba(0,0,0,0.3);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c00    0000);
    zoom: 1;
}
.div:nth-child(n) {
    filter: none;
}

#login {
    width: 350px;
}

#login_container p, input{
    font-weight: bold;
    font-style: italic;
    color: white;
    font-size: 20px;
}