html

html - CSS - 如何删除元素之间不需要的边距？

转载作者：技术小花猫更新时间：2023-10-29 12:10:17

24

4

这似乎是一个常见问题，但我找到的解决方案都没有对我有用。

<html>
    <head>
        <link rel="stylesheet" href="c/lasrs.css" type="text/css" />
    </head>
    <body>
        <div class="header">
            <img src="i/header1.png">
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. 
               Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, 
               massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, 
               bibendum at, posuere sit amet, nibh.</p>
        </div>
    </body>
</html>

CSS

body {
    min-width: 950px;
    background-color: #FFFFFF;
    color: #333333;
}

.header {
    width: 950px;
    height: 171px;
    margin: 0px auto;
    padding: 0px;
    background-color: #CCCCCC;
    position: relative;
}

.content {
    width: 950px;
    margin: 0px auto;
    padding: 0px;
    background-color: #E3EEF9;
    position: relative;
}

我故意破坏了图像路径并为 .header div 设置了背景颜色，以便我可以看到它们是否接触。这是我的页面的样子:

page example

如您所见，我已尝试将两个 divs 的填充和边距设置为 0。

为什么还有差距？

最佳答案

这是由于以下原因:

Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).

所以尝试:

p {
     margin: 0px;
}

注意:浏览器也会在其他元素上添加默认样式!这在不同情况下既有用又烦人。可以通过三种方式解决此问题:

完全删除浏览器可能具有的所有默认样式。这是通过使用重置样式表 实现的。最受欢迎的是 Eric Meyer’s CSS Reset .如果您想全力以赴并在任何浏览器中都有一个完全干净的开始，请使用 Meyer 的技术。此方法优于使用慢速 *{ margin:0; padding:0; }重置方法 ( Read here why )
将样式表规范化为您自己的默认值。网页设计师的一大烦恼是不同的浏览器使用不同的默认样式。但是，完全重置 伴随着重新定义所有元素样式的耗时麻烦。因此，您可以规范浏览器的所有默认样式，方法是使用一组预定义的一致且合理的默认样式。常用的方法是使用 normalize.css为此(Twitter、Github 和 SoundCloud 使用它!)
必要时调整默认值或有意识地解决默认值。使用默认值的最常见方式(不是说这是最好的方式)是知道它们存在并在必要时调整它们。默认样式存在是有原因的:它们可以帮助开发人员快速获得他们想要的外观。看起来有点不对劲？只需相应地调整样式即可。但是，请确保为正确的元素使用正确的标签。例如，而不是删除 <p> inline texts 的边距, 你应该使用 <span>标记(无默认 margin )

这应该有助于您了解幕后发生的事情。

关于html - CSS - 如何删除元素之间不需要的边距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17971829/

24

4

0

文章推荐： html - 响应式 App : which font-size units em vs. px vs. pt vs. percent

文章推荐： javascript - 弹窗访问父dom

文章推荐： html - 空 div(样式为 : height) will not display

文章推荐： html - 使用 CSS 在 anchor 内垂直对齐图像

c - gstreamer 需要 g_main_loop_run 而 gtk 需要 gtk_main()
我正在尝试用 C 语言编写一个使用 gstreamer 的 GTK+ 应用程序。 GTK+ 需要 gtk_main() 来执行。 gstreamer 需要 g_main_loop_run() 来执行。
python - 为什么 opencv3 需要 libavcodec56 而 opencv2 需要 libavcodec57
我已经使用 apt-get 安装了 opencv。我得到了以下版本的opencv2，它工作正常: rover@rover_pi:/usr/lib/arm-linux-gnueabihf $ pytho
ios - UIScrollView - 需要 x 位置/宽度的约束，需要 y 位置/高度的约束
我有一个看起来像这样的 View 层次结构(基于其他答案和 Apple 的使用 UIScrollView 的高级 AutoLayout 指南): ScrollView 所需的2 个步骤是: 为 Scr
Linux glib 需要 pkg-config 而 pkg-config 需要 glib？
我尝试安装 udev。 udev 在 ./configure 期间给我一个错误 --exists: command not found configure: error: pkg-config and
sql - 为什么我选择 1 需要 40 毫秒，而选择 150 需要 500 秒？
我正在使用 SQLite 3。我有一个表，forums，有 150 行，还有一个表，posts，有大约 440 万行。每个帖子都属于一个论坛。我想从每个论坛中选择最新帖子的时间戳。如果我使用 SEL
Golang jsonapi 需要 string 或 int 但 mongo 需要 bson.ObjectId
使用 go 和以下包: github.com/julienschmidt/httprouter github.com/shwoodard/jsonapi gopkg.in/mgo.v2/bson
sql-server - 同样的 SQL 请求，CockroachDB 需要 4min SQL Server 需要 35ms。我错过了什么吗？
The database仅包含 2 个表: 钱包(100 万行) 事务(1500 万行) CockroachDB 19.2.6 在 3 台 Ubuntu 机器上运行每个 2vCPU 每个 8GB R
c++ - std::iter_swap 需要 ValueSwappable args vs std::swap 需要 Move Assignable args
我很难理解为什么在下面的代码中直接调用 std::swap() 会导致编译错误，而使用 std::iter_swap 编译却没有任何错误. 来自 iter_swap() versus swap() -
oracle - SELECT 需要 100 毫秒； CREATE table as select - 或 - INSERT into select 需要 15 分钟
我有一个非常简单的 SELECT *用 WHERE NOT EXISTS 查询条款。 SELECT * FROM "BMAN_TP3"."TT_SPLDR_55E63A28_59358" SELECT
css - Sass 循环 @import，a.scss 需要 b.scss 上的类，b.scss 需要 a.scss 上的类
我试图按部分组织我的 .css 文件，我需要从任何文件访问文件组中的任何类。在 Less 中，我可以毫无问题地创建一个包含所有文件导入的主文件，并且每个文件都导入主文件，但在 Sass 中，我收到一个
redis - Microsoft.AspNet.SignalR.Redis 需要 StackExchange.Redis.StrongName，但是 StackExchange.Redis.Extensions.Core 需要 StackExchange.Redis
Microsoft.AspNet.SignalR.Redis 和 StackExchange.Redis.Extensions.Core 在同一个项目中使用。前者需要StackExchange.Red
ruby-on-rails - sass-rails 需要 sprockets 2.0.0 但 rails 4.1.0 需要 sprockets 2.12.1
这个问题在这里已经有了答案: Updating from Rails 4.0 to 4.1 gives sass-rails railties version conflicts (4 个答案) 关
需要 Azure 发布管道身份验证
我们有一些使用 Azure DevOps 发布管道部署到的现场服务器。我们已经使用这些发布管道几个月了，没有出现任何问题。今天，我们在下载该项目的工件时开始出现身份验证错误。部署组中的节点显示在线，
需要 Firebase 索引但未提供链接
Tip: instead of creating indexes here, run queries in your code – if you're missing any indexes, you
需要 Elm 语法帮助
你能解释一下 Elm 下一个声明中的意思吗？ (=>) = (,) 我在 Elm architecture tutorial 的例子中找到了它最佳答案这是中缀符号。实际上，这定义了一个函数 (=>
需要 .NET 程序集查看器
我需要一个 .NET 程序集查看器，它可以显示低级详细信息，例如元数据表内容等。最佳答案 ildasm 是 IL 反汇编程序，具有低级托管元数据 token 信息。安装 Visual Studio
需要 VBA 循环逻辑
我有两个列表要在 Excel 中进行比较。这是一个很长的列表，我需要一个 excel 函数或 vba 代码来执行此操作。我已经没有想法了，因此转向你: **Old List** A
.net - 需要.NET库以将TIFF文件转换为PDF
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想要改善这个问题吗？更新问题，以便将其作为on-topi
需要 XML 命名空间吗？
我正在学习 xml 和 xml 处理。我无法很好地理解命名空间的存在。我了解到命名空间帮助我们在 xml 中分离相同命名的元素。我们不能通过具有相同名称的属性来区分元素吗？为什么命名空间很重要或需要
需要 Azure 端口吗？
我搜索了 Azure 文档、各种社区论坛和 google，但没有找到关于需要在公司防火墙上打开哪些端口以允许 Azure 所有组件(blob、sql、compute、bus、publish)的简洁声明

首页

博学

6Ren·AI

商城

html - CSS - 如何删除元素之间不需要的边距？

HTML

CSS