DIV 内的边距答案

【问题标题】：Margin inside of a DIVDIV 内的边距
【发布时间】：2014-11-11 16:05:38
【问题描述】：

我正在尝试对 div 内的一些文本进行边距，但我不想对整个页面进行边距，我希望边距从 div 开始。那是因为我已经使网站适合具有至少 800 x 600 分辨率屏幕的人，如果我将整个页面留出边距，那么对于具有 1920 x 1080 以外分辨率的人（我的分辨率)。

CSS

body
{
    background-color: #fff;
    margin: 0;
}

p
{
    display:inline;
}

.logo
{
    position:absolute;
    background-image:url(images/Logo.png);
    background-position:center;
    background-repeat: no-repeat;
    height: 60px;
    width: 100%;
}

.logobg
{
    background-color: #0e1216;
    width: 100%;
    height: 60px;
    min-width: 800px;
}

.navBarBtn
{
    float:left;
    margin-left: 10px;
    margin-top: 15px;
    width: 100 %;
    height: 25px;
}

HTML

<body>
<!--Logo & Navigation Bar-->
<div class="logobg">
<div class="logo">

<p id="text1" class="navBarBtn1"> Hem </p>
<p id="text1" class="navBarBtn2"> Om Oss </p>
<p id="text1" class="navBarBtn3"> Referenser </p>
<p id="text1" class="navBarBtn4"> Partners </p>
<p id="text1" class="navBarBtn5"> Kontakt </p>

</div>
</div>

这里是网站，您可以自己查看。 Website URL

【问题讨论】：

标签： html css class web margin

【解决方案1】：

请改用容器 (div) 的填充 css 属性。 padding 是元素内部和边框的空间，而 margin 是元素边框之外的空间。

查看box model。

【讨论】：

你能给我举个例子吗，我试图改变填充的边距，但我没有看到任何变化。
您可以在包含文本的 div 的样式中添加类似“padding:20px”的内容

【解决方案2】：

您可以为导航按钮使用更少的类是正确的。在该 css 类中使用 Float:Left 将它们水平排列，只要屏幕或包含框足够宽以适应，否则它将在下面开始第二行。您提到您希望该网站针对屏幕宽度至少为 800 像素的用户进行优化。因此，我还建议您在容器类 (logobg) 中除了 width:100% 之外添加一个 min-width:800px。如果您只是将宽度保持在 100%，则使用较小屏幕的人会使菜单缩小并重新对齐，并且您的按钮不会保持水平。请看下面的代码：

HTML

<p id="text1" class="navBarBtn"> Hem </p>
<p id="text1" class="navBarBtn"> Om Oss </p>
<p id="text1" class="navBarBtn"> Referenser </p>
<p id="text1" class="navBarBtn"> Partners </p>
<p id="text1" class="navBarBtn"> Kontakt </p>

CSS

.logobg {
background-color: #0e1216;
width: 100%;
min-width: 800px;
height: 60px;
}

.navBarBtn {
float:left;
margin-left: 10px;
margin-top: 15px;
width: 100%;
height: 25px;
}

【讨论】：

好的，感谢您的回答，但这仍然不能解决边距部分的问题。我会让你看看这个网站是怎样的：www.undertak.se；如您所见，它看起来不太好。我希望左上角的文字显示在徽标之后。
@kemkoi 好吧，我不完全明白你在找什么。在这种情况下，我相信您可能不希望 div 内的导航按钮使用您的徽标作为背景。我建议您也给带有徽标的 div 一个 float:left ，以便它成为带有导航链接的“线”的一部分。所以在 css 类 .logo 中添加 float:left;并在 html 中添加并结束
在导航链接之前而不是之后。使用这种方式，您可能还需要为 .logo 指定特定的宽度/高度，这样它就不会切断任何东西或将您的导航推开

【解决方案3】：

我不确定这是否是您要查找的内容，但如果是，您可以浮动每个“p”元素，然后在它们之间添加边距，而不是将它们定位为绝对值。

HTML：

<p id="text1" class="navBarBtn"> Hem </p>
<p id="text1" class="navBarBtn"> Om Oss </p>
<p id="text1" class="navBarBtn"> Referenser </p>
<p id="text1" class="navBarBtn"> Partners </p>
<p id="text1" class="navBarBtn"> Kontakt </p>

CSS：

.navBarBtn
{
    float:left;
    margin-left: 10px;
    margin-top: 15px;
    width: 100 %;
    height: 25px;
}

示例：http://jsfiddle.net/xakaxsqg/3/

【讨论】：