Question

我在另一个div中放置了一个div（内容中的main_content）。我想在两个div之间有一些空格，我尝试使用padding属性，但main_content填充了内容div的所有空格。

如何在所有类型的显示中的两个div之间使用一些空格（顶部，左侧，底部，右侧）使main_content div适合div内容？

body {background-color:#eaeaea; color:#303030;}
#container {width:100%;height:100%;}
#tray {padding:20px 15px; font:85%/1.2 "tahoma",sans-serif;}
#tray {background-color:#36648B; color:#cfcfcf;}
#cols {position:relative; margin:15px 0; padding-right:15px;}
#aside {float:left; width:215px; margin-right:0;}
#content { margin-left:232px; overflow:visible;background-color: #ffffff; }
#main_content
{
    padding-right:10px;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#8BC735;
}

<body lang="en">
    <div id="container">
        <div id="tray">
        testing
        </div>
            <div id="cols">
                <div id = "aside">
                temp
                </div>
                <div id = "content">
                    <div id="main_content">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>                              
            </div>     
    </div>
</body>

Answer 1

您需要为#content div而不是#main_content div设置填充属性。

#content {
    padding: 10px 10px 10px 10px;
    background-color: red;
}

#main_content {
    background-color: #8BC735;
}

Answer 2

工作代码段：

＆＃13;

body {background-color:#eaeaea; color:#303030;}
#container {width:100%;height:100%;}
#tray {padding:20px 15px; font:85%/1.2 "tahoma",sans-serif;}
#tray {background-color:#36648B; color:#cfcfcf;}
#cols {position:relative; margin:15px 0; padding-right:15px;}
#aside {float:left; width:215px; margin-right:0;}
#content {
    overflow: hidden;
    background-color: white;
}
#main_content
{
    padding-right:10px;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#8BC735;
    margin:10px;
}

＆＃13;

<div id="container">
        <div id="tray">
        testing
        </div>
            <div id="cols">
                <div id = "aside">
                temp
                </div>
                <div id = "content">
                    <div id="main_content">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>                              
            </div>     
    </div>

＆＃13;

Answer 3

您可以将填充设置为父级。或者，为孩子设置保证金

#content {
    padding: 10px;
}

或

#main_content {
    margin: 10px;
}

Answer 4

试试这个希望这会有所帮助。

#aside {float:left; width:45%;background-color: #ffffff; margin:5px;padding:5px;}
#content {float:left;width:50%; overflow:visible;background-color: #ffffff; }
#main_content
{  
    margin:10px;
    padding:10px;
    background-color:#8BC735;


}

将div放在另一个div中，在两个div之间保留空格

4 个答案: