Question

我正在研究我在网上发现并遇到问题的代码。当我将文本添加到名为content的主div时，我没有边距，文本太靠近侧边栏。我该如何解决？这是代码：

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <div id="outer">
        <div id="header"></div>
        <div id="inner">
            <div id="sidebar"></div>  
            <div id="content">
        </div>  
    </div>
</html>

CSS

#outer {width:1000px;margin:0 auto;}
#inner {overflow:hidden;}
#header {min-height:40px;background:#bbb}
#content {width:900;min-height:900px;float:left;background:#ccc;clear:}
#sidebar{width:100px;min-height:250px;float:left;background:#ddd}

Answer 1

在CSS

中的内容和/或侧边栏div上使用填充和/或边距

http://www.htmldog.com/guides/cssbeginner/margins/

Answer 2

你有没有试过像

这样的东西

#content{box-sizing:border-box, width:900;min-height:900px;float:left;background:#ccc; padding:10px;}

使用＆＃34;大小调整＆＃34;应该确保它不会弄乱你的页面。

编辑：是的，关闭那个HTML，这真的有帮助。

Answer 3

不知道你究竟需要什么。但请尝试添加padding-left或margin-left

#content {width:900;min-height:900px;float:left;background:#ccc;padding-left:20px;margin-left:10px;}

Answer 4

在内容div中添加另一个div并在其上使用边距。

您还可以使用段落标记和相同的使用边距，这不会破坏您的布局。

你也错过了一个结束标签，这肯定需要修复。

尝试：

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <div id="outer">
        <div id="header"></div>
        <div id="inner">
            <div id="sidebar"></div>  
            <div id="content">
               <div class="box">
                all text and content comes here
                </div>
             </div>
        </div>  
    </div>
</html>

其他CSS：

.box {
margin:50px;
}

HTML内容div间距

4 个答案: