Question

我正在使用chrome开发人员工具查看代码，并尝试在我的网站上模拟它，但它的工作方式不同。

显然通过设置边距：0;，边距被删除但是边缘在技术上不需要为空而没有空间吗？

我没有在css格式中看到边距完全消失。

有什么想法吗？

我的css：

.header{
    width: 100%;
    height: 30px;
    background-color: #CCC;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: 0px;
}

我的HTML：

<div class = "header">
    <strong>Categories:</strong>
    <?php foreach($categories as $category): ?>
    <a href = ".?category_id=<?php echo $category['categoryID'];?>"><?php echo $category['categoryName'];?></a>
    <?php endforeach; ?>        
</div>

Answer 1

将边距设置为零应足以使其与包含它的任何内容对齐 - 但包含它的内容可能是提供自己的间距。我猜你在已经删除了标题上的边距时，你没有从正文中删除任何填充。尝试添加此规则：

body {
    margin: 0;
    padding: 0;
}

Answer 2

我很确定你没有重置浏览器的默认CSS。尝试添加：

* { padding: 0; margin: 0; }

看看是否会解决你的间距问题。有些人不喜欢使用此方法重置填充和边距，因为它将此规则应用于所有内容。但作为确定这是否是您的问题的快速测试，此代码将是完美的。

如果这确实解决了您的问题，请尝试四处寻找一个好的CSS重置并将其添加到您的网站。

reddit如何创建没有任何边距的顶部标题？

2 个答案: