CSS外边距问题

Question

CSS外边距问题

3

我正在学习HTML和CSS。
页面上有一个div元素，它没有填满整个页面。
在其中，有一个ul元素和一些列表项。
我想把列表放在距离div元素顶部227像素的位置，但我无法实现这一点-它会被推得更远。
另外，在列表项之间，我希望有40像素的间距，但它也做得更多了。
问题出在哪里？
以下是我的代码：
Html:

<body>
    <div class="Hashta">
        <div class="Menu">
            <ul id="MenuItems">
              <li><a href="#" >ONE</a></li>
              <li><a href="#" >TWO</a></li>
              <li><a href="#" >THREE</a></li>
              <li><a href="#" >FOUR</a></li>
            </ul>
        </div>
    </div>
</body>

CSS：

body {
   background-color: Gray;
}
.Hashta{
   width:874px;
   height:650px;
   background-color:black;
   margin: auto auto 50px auto;
   border-radius: 20px;
   border: 3px solid darkgray;
   moz-box-shadow: 2px 2px 10px black;
   webkit-box-shadow: 2px 2px 10px black;
   box-shadow: 2px 2px 10px black;
}
.Menu {
   margin-top: 227px;
   padding-right: 50px;
   float:right;
}

#MenuItems {
   list-style:none;
}
#MenuItems li {
   text-align:center;  
   position:relative;  
   padding: 4px 10px 4px 10px;  
   margin-right:30px;  
   margin-bottom: 40px;  
   border:none;  
}

#MenuItems li a{
   width: 280px;
   height: 70px;
   background-color: green;
   color:White;
   font-family:Arial, Helvetica, sans-serif;  
   font-size:24px;  
   display:block;  
   outline:0;  
   text-decoration:none;  
   text-shadow: 1px 1px 1px #000;
   line-height: 70px;  
}

如果您想测量像素，可以安装这个工具：http://www.mioplanet.com/products/pixelruler/ （点击旋转）
谢谢！

- amitairos

2

如果你是初学者，我建议使用重置样式表。我总是使用一个，它确实有帮助。它会剥离所有与浏览器相关的样式，并通过提供“空白画布”使其更加容易。我总是使用这个：http://meyerweb.com/eric/tools/css/reset/ - zik

在我看来没问题 - 示例 - Aditya Manohar

2

请记住，如果您使用CSS重置，最好用其他样式替换您取消设置的敏感默认值。有默认样式是有原因的。 - You

谢谢@kiz。不过我使用了Jose Faeti的重置方法。 - amitairos

5个回答

1

每个列表项的总高度为高度+填充+边框+外边距。

将#MenuItems li的填充值更改为：

 padding: 0 10px 0 10px;

请查看http://jsfiddle.net/NGLN/rBjrD/1/

- NGLN

0

尝试使用绝对定位：

.Hashta{
   width:874px;
   height:650px;
   background-color:black;
   margin: auto auto 50px auto;
   border-radius: 20px;
   border: 3px solid darkgray;
   moz-box-shadow: 2px 2px 10px black;
   webkit-box-shadow: 2px 2px 10px black;
   box-shadow: 2px 2px 10px black;
   position:relative;
}
.Menu {
       position:absolute;
       top:227px;
       right:0;
       padding-right: 50px;
       float:right;
    }

- Andreas

1

总高度 = 高度 + 填充 + 边框 + 外边距 - NGLN

你是对的 @NGLN，但是填充在元素的边框内，并不计算两个元素之间的间隙。 - Aditya Manohar

我将 .Menu 的 margin 改为 padding，但是仍然比我想要的多了大约20像素。 - amitairos

当您使用固定布局时，我想绝对定位和图层在这里效果最好。尝试使用绝对定位。 - Andreas

绝对定位使其向左浮动。 - amitairos

在这种情况下，不需要也不建议使用绝对定位。 - NGLN

0

在编程领域中，翻译如下：

为body添加margin:0; padding:0

在#MenuItems li中进行替换：

padding: 4px 10px 4px 10px;

使用：

margin: 4px 10px 4px 10px;

这将使按钮之间的距离等于40像素。

- Aziz Shaikh

它确实有作用，但不是你声明的原因。在声明中更深处还有另一个 margin-bottom，导致所需的 40px 边距，而不是你的边距声明。此外：这个答案仍然没有解决问题的另一部分，即设置特定的顶部边距。 - NGLN

0

试试这个：

<style> 
body {
   background-color: Gray;
}
.Hashta{
   width:874px;
   height:650px;
   background-color:black;
   margin: auto auto 50px auto;
   border-radius: 20px;
   border: 3px solid darkgray;
   moz-box-shadow: 2px 2px 10px black;
   webkit-box-shadow: 2px 2px 10px black;
   box-shadow: 2px 2px 10px black;
}
.Menu {
   margin-top: 227px;
   padding-right: 50px;
   float:right;
}

#MenuItems {
   list-style:none;
}
.secLi{
   text-align:center;  
   position:relative;  
   padding: 0px 10px 0px 10px;  
   margin-right:30px;  
   margin-top: 40px;  
   border:none;  
}
.firstLi{
   text-align:center;  
   position:relative;  
   padding: 0px 10px 0px 10px;  
   margin-right:30px;  
   margin-top: -16px;  
   border:none;  
}

#MenuItems li a{
   width: 280px;
   height: 70px;
   background-color: green;
   color:White;
   font-family:Arial, Helvetica, sans-serif;  
   font-size:24px;  
   display:block;  
   outline:0;  
   text-decoration:none;  
   text-shadow: 1px 1px 1px #000;
   line-height: 70px;  
}
</style>

<body>
    <div class="Hashta">

        <div class="Menu">
            <ul id="MenuItems">
              <li class="firstLi"><a href="#" >ONE</a></li>
              <li class="secLi"><a href="#" >TWO</a></li>
              <li class="secLi"><a href="#" >THREE</a></li>
              <li class="secLi"><a href="#" >FOUR</a></li>
            </ul>
        </div>
    </div>
</body>

- kleinohad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jose Faeti · Accepted Answer

您应该通过重置所有元素来开始样式化，以便每个浏览器都显示相同的内容。

您可以检查其中一个许多CSS重置库，但对于初学者，像这样的东西已经足够了：

* {
  margin: 0;
  padding: 0;
}

这段代码应该首先出现在你的CSS样式表中，它将移除每个元素的所有边距和填充，因此您只需在需要的元素中添加即可。

更新如果您想在这段代码之后恢复某些元素的边距或填充（例如在body中），只需在之前的规则后面编写新规则即可，例如：

body {
  padding:10px; /* Add 10px to body only */
}