相关疑难解决方法(0)

为什么这种CSS margin-top风格不起作用？

我尝试在另一个div内的div上添加边距值.一切正常,除了最高值,它似乎被忽略了.但为什么？

我的期望:
我对预期保证金的预期:50px 50px 50px 50px;

我得到了什么:
我得到的保证金:50px 50px 50px 50px;

码:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

Run Code Online (Sandbox Code Playgroud)

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

W3Schools没有解释为什么保证金的行为方式.

html css margin

jam*_*lin

2015 04-06

309
推荐指数

8
解决办法

22万
查看次数

CSS边缘恐怖; 边距在父元素之外添加空格

我的css边距不符合我想要或期望的方式.我好像我的标题margin-top会影响它周围的div-tags.

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

......但这就是我最终的结果: 我得到了什么......

资源:

<!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>

Run Code Online (Sandbox Code Playgroud)

我在这个例子中夸大了边缘.h1-tag上的默认浏览器边距略小,在我的情况下,我使用Twitter Bootstrap,使用Normalizer.css将默认边距设置为10px.不重要,重点是; 我不能,不应该,不想改变h1标签上的边距.

我想这跟我的其他问题类似; 为什么这种CSS margin-top风格不起作用？.问题是我该如何解决这个具体问题？

我已经阅读了类似问题的几个主题,但没有找到任何真正的答案和解决方案.我知道添加padding:1px;或border:1px;解决问题.但这只会增加新的问题,因为我不希望在div标签上有填充或边框.

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

html css margin overflow

jam*_*lin

2018 10-02

128
推荐指数

5
解决办法

7万
查看次数