gpt4 book ai didi

html - CSS 边距问题

转载 作者:可可西里 更新时间:2023-11-01 12:53:06 26 4
gpt4 key购买 nike

我刚开始学习 HTML 和 CSS。
我在页面上有一个 div 元素,它没有填满整个页面。
其中 - 有一个 ul 元素和一些列表项。
我想将列表放在距 div 元素顶部 227px 的位置,但我无法做到这一点 - 它会把它推得更多。
此外,我希望在列表项之间留出 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/(点击旋转)
谢谢!

最佳答案

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

您可以检查那里的许多 CSS 重置库之一,但是对于开始这样的事情已经很好了:

* {
margin: 0;
padding: 0;
}

这首先出现在您的 CSS 样式表中,将删除每个元素的所有边距和填充,因此您可以稍后仅在您想要的元素中添加它们。

更新如果您想在该代码之后恢复一些元素边距或填充(例如在正文中),只需在之前的规则之后写一个新规则,例如

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

关于html - CSS 边距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6454666/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com