个人中心
gpt4 book ai didi

html - CSS margin 恐怖； Margin 在父元素之外添加空间

转载 作者：行者123 更新时间：2023-12-02 04:21:30 26 4
gpt4 key购买 nike

<分区>

我的 CSS 边距没有按照我想要或期望的方式运行。我的页眉边距顶部似乎影响了它周围的 div 标签。

这就是我想要和期望的: What I want....

...但这就是我最终得到的: What I get...

来源:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>

<style type="text/css">
body {
    margin:0;
}
#page {
    margin:0;
    background:#FF9;
}
#page_container {
    margin:0 20px;
}
h1 {
    margin:50px 0 0 0;
}
</style>

</head>

<body>

<div id="page">
    <div id="page_container">
        <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
                <h2 id="site-description">Description</h2>
            </hgroup>
        </header>
    </div>
</div>

我在这个例子中夸大了边距。 h1-tag 上的默认浏览器边距有点小，在我的例子中，我使用 Twitter Bootstrap，带有 Normalizer.css，它将默认边距设置为 10px。没那么重要，重点是；我不能、不应该、不想更改 h1 标签上的边距。

我想这和我的另一个问题类似； Why does this CSS margin-top style not work? 。问题是我该如何解决这个具体问题？

我已阅读 a few threads关于类似的问题，但还没有找到任何真正的答案和解决方案。我知道添加 padding:1px; 或 border:1px; 可以解决问题。但这只会增加新的问题，因为我不想在我的 div 标签上添加填充或边框。

一定有更好的最佳实践解决方案吗？这一定很常见。

26 4 0
文章推荐： mysql - 喜欢的帖子设计细节
文章推荐： android - LeetCode 错误 : Warning : Classpath entry points to a non-existent location:
文章推荐： 以编程方式注册 Azure 应用程序(图形 API)
文章推荐： navigationview - SwiftUI - ObservableObject 创建了多次
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com