HTML 内容 div 间距答案

【问题标题】：HTML Content div spacingHTML 内容 div 间距
【发布时间】：2013-01-19 17:49:05
【问题描述】：

我正在研究我在网上找到并遇到问题的代码。当我将文本添加到名为内容的主 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}

【问题讨论】：

你不是少了一个结束标签吗？
可能是，但我认为 CSS 代码有问题。有什么想法吗？
如果您添加一个指向您找到它的链接，它也可能有助于我们回答您的问题。
第一件事——关闭标签！

标签： html margins

【解决方案1】：

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

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

【讨论】：

我尝试过，但我的整个页面都搞砸了。你会在代码中添加什么，以使文本从左侧 50 像素？
尝试将内容的宽度设置为 850px 并在其上放置 50px 的左边距

【解决方案2】：

您是否尝试过诸如

之类的方法

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

使用“box-sizing”应该确保它不会弄乱你的页面。

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

【讨论】：

盒子大小很好，但在旧浏览器中会失败并破坏整个布局。

【解决方案3】：

不知道你到底需要什么。但是尝试添加padding-left或margin-left

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

【讨论】：

【解决方案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;
}

【讨论】：

我尝试了您所说的一切，但我的页面仍然损坏或文本太近。我想我会找到另一个类似布局的样本......谢谢你的帮助
它并没有破坏你可能只是犯了一个错误见jsbin.com/egiwev/1/edit