在子元素(h2)上使用margin时,为什么它会为父元素(#box)提供保证金呢?如果我将边距更改为填充,则按预期工作.有什么改变或我错过了什么?这是我的示例代码
<html>
<head>
<style>
#box{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
height:200px;
width:500px;
background:red;
box-shadow: 15px 15px 12px grey;
-moz-box-shadow: 15px 15px 12px grey;
-webkit-box-shadow: 15px 15px 12px grey;
text-align:center;
margin-top:0;
}
#box h2{
color:#fff;
text-shadow: 2px 2px 2px #000;
margin-top:75px;/*making this padding gives the effect I thought I could achieve with margin*/
height:50px;
width:200px;
}
</style>
</head>
<body>
<div id="box">
<h2>Fun with CSS3</h2>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
如果任何人或每个人都可以分享他们的边缘怪癖经验.谢谢
这是我用作测试站点的站点:http: //test.pafo.net/
我的问题是页面,即使它们是平等的,它们也会改变位置.如果单击Seite 2然后单击Start并继续单击它们,您将看到整个容器移动了一点.
这些页面之间的唯一区别是Seite 2有更多示例文本,没有别的.
是什么导致了这个?我忘记了某个样式表中的某个属性吗?
我正在尝试将按钮的边距设置为0,(因此按钮之间没有间距).
基本上,我希望我的按钮看起来像那样(具有以下样式和颜色):

任何想法我怎么能完成这种任务?我不想自己创建一个9补丁图像(因为我没有任何知识这样做).
这是我的代码
<script>
function showin(box) {
cur = parseInt(document.getElementById(box).style.marginTop);
alert(cur);
}
showin('child');
</script>
<div id="parent" class="parent">
<div id="child" class="child" style="margin-top:-10px;">
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
为什么它没有给我任何警告信息?
我正在创建基于wordpress的个人网站,现在我正在重新制作模板.经过一整天的css,html和php ......以及寻找很多互联网的东西,我为很多人所知道的问题.
在我的网站的某个地方,一些元素给了我我不想要的保证金.您可以在下面的图片中看到它:

我知道这个网站的规则,给你代码,你会尽力帮助我,但是现在,我不知道问题出在哪里.因此,如果有经验丰富且时间不多的人可以查看我的页面,我会非常感激.
我的网站si svrcek.webfix.sk
我试图将我的导航元素设置为中心,但它不适用于旧版本的Internet Explorer或Chrome.它也不会改变风格.我怎样才能让这个中心化并改变?这是代码:
导航:
<nav id="Nav">
<a href="TMR Library.html">Library</a> |
<a href="TMR Contact.html">Contact</a> |
<a href="TMR About.html">About</a>
</nav>
Run Code Online (Sandbox Code Playgroud)
CSS
#Nav {
margin:0 auto;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
Run Code Online (Sandbox Code Playgroud) 我对我简单的网络感到疯狂.页面顶部和我的图像之间有一个无法解释的空间.有人能解释一下为什么吗?
我的HTML
<body>
<img src="img/top.png" border="0" />
Run Code Online (Sandbox Code Playgroud)
我的css
<style type="text/css">
/* --------- demo presentation------------ */
body {text-align: center;}
#header {margin-top:0px; height: 100px; width:800px; margin:0px auto; background: #000;}
#header p {text-align:center; font-style:italic; color:#fff; font-family:Cambria; font-size:30px;}
#primary .obsah, #content .obsah, #secondary .obsah {text-align:justify; font-family:Cambria; color:#E6E8E1; font-size:15px; }
#primary p:hover, #content p:hover, #secondary p:hover {color:black;}
a{color:#E6E8E1;}
a:hover{color:black;}
#footer {padding:5px; height: 20px; width:800px; margin:0px auto; background: #000; color:#fff; font-family:Cambria; font-size:25px;}
/* --------------------------------------- */
/* ----- set width and center layout …Run Code Online (Sandbox Code Playgroud) 我有一个页面有两个大表,一个位于另一个之上:
http://www.sportsmogul.com/Encyclopedia/2007/BOS/index.html
在我的编辑器(Dreamweaver)中,表之间没有空格.
但在Chrome中,差距大约为10个像素(背景显示的蓝色空间,顶部"导航栏"与页面其余部分之间).
想摆脱这个差距.
我有一个想增加的8像素边框,但是我找不到它的来源。另外,如果我使用边距,它会不成比例地增加边框。
CSS和整个项目在这里可用: CSS Resume Project
@font-face {
font-family: "Open Sans";
src: url(Open_Sans/OpenSans-Regular.ttf);
}
.global {
/*border: solid 10px lightgray;*/
border-radius: 25px;
font-family: 'Open Sans', sans-serif;
background-color: white;
/*position: absolute;*/
top: 20px;
margin-bottom: auto;
padding-bottom: 20px;
right: 20px;
left: 20px;
align-self: center;
}
h3 {
font-weight: 300;
}
p {
font-weight: 300;
}
body {
background-color: lightgray;
}
Run Code Online (Sandbox Code Playgroud)
任何帮助,甚至拉请求将不胜感激。谢谢。
在我的代码中,我设置了所有span标签,并且margin-left在所有标签中都很好,但margin-top根本不起作用.它一直伴随着我,所以我想问一下我是否对span标签有任何误解.请帮忙!
<div id="header">
<span id="logospan" style="margin-left: 30px; margin-top: 8px;"> <img src="logo.png" width="70px" height="70px"> </span>
<span id="homespan" style="margin-left: 150px;margin-top: 0px;"> <img src="1.png" width="40px" height="40px"> </span>
<span id="" style="margin-left: 150px;margin-top: 0px;"> HOME </span>
</div>
Run Code Online (Sandbox Code Playgroud) margin ×10
css ×9
html ×6
android ×1
button ×1
html-table ×1
html5 ×1
image ×1
javascript ×1
layout ×1
nav ×1
space ×1
stylesheet ×1