Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 删除父div的边框时,子div将丢失其边距_Css_Html - Fatal编程技术网

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

Css 删除父div的边框时,子div将丢失其边距,css,html,Css,Html,我有一个div#login_容器,其中有另一个div#login,它们都在另一个div#block_2中。在#login_容器周围有边框时,一切都按我所希望的那样工作,但是,当我删除边框时,它的子div(即#login)失去了边距,它的所有文本和其他内容都接触到#login_容器。我正在学习html和css,如果我错了,请纠正我,并帮助我如何让#logindiv保留其边距。多谢各位 无边框#登录_容器div: 边框在#login_container div附近: .html的代码段:

我有一个div
#login_容器
,其中有另一个div
#login
,它们都在另一个div
#block_2
中。在
#login_容器
周围有
边框
时,一切都按我所希望的那样工作,但是,当我删除边框时,它的子div(即
#login
)失去了边距,它的所有文本和其他内容都接触到
#login_容器
。我正在学习html和css,如果我错了,请纠正我,并帮助我如何让
#login
div保留其边距。多谢各位

无边框#登录_容器div:

边框在#login_container div附近:

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


请修改代码。这叫折页边距,最简单的补救办法是用填充代替垂直间距。卡尔<代码>!!!:)@pawel谢谢你的信息@是的,我知道。我只是在学习这个,还做了一些小动作D
#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;
}
#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;
}