我正在尝试删除边框,但我做不到。边框:无,边框样式:无; border-width:0px 或无边框定义。我为标题尝试了所有这些,但每当我尝试时,div 都会移动。
这是带有边框(任何样式)的样子
这些是 2. 情况的其余 css 代码和 html 代码。 CSS:
body{
top:0px;
text-align:center;
background-color:#F3F3F3;
margin:0px;
}
div#baslik{
top:0px;
width:800px;
height:230px;
border-style:solid;
margin-left:auto;
margin-right:auto;
background-image:url('/gorsel/baslik.jpg');
}
div#siteler{
text-align:right;
height:55px;
width:800px;
padding-bottom:5px;
bottom:0px;
margin-top:195px;
padding-right:30px;
}
a:visited,a:link.siteler{
padding-right:10px;
padding-left:10px;
}
img:hover.siteler{
-moz-box-shadow:0px 0px 10px #FFF;
-webkit-box-shadow:0px 0px 10px #FFF;
box-shadow:0px 0px 10px #FFF;
}
img.siteler{
width:30px;
height:30px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>BAŞLIK</title>
<link rel='stylesheet' type='text/css' href='tema.css'>
<meta http-equiv='Content-Type' content='text/HTML; charset=utf-8' />
<link rel='shortcut icon' href='/gorsel/favicon.ico' type='image/x-icon' />
</head>
<body>
<div id='baslik'>
<div id='siteler'>
<a class='siteler' href=#><img class='siteler' src='/gorsel/facebook.jpg'></a>
<a class='siteler' href=#><img class='siteler' src='/gorsel/rss.jpg'></a>
<a class='siteler' href=#><img class='siteler' src='/gorsel/twitter.jpg'></a>
<a class='siteler' href=#><img class='siteler' src='/gorsel/planetminecraft.jpg'></a>
<a class='siteler' href=#><img class='siteler' src='/gorsel/youtube.jpg'></a>
</div>
</div>
</body>
</html>
最佳答案
是margin collapsing .当 #baslik
有顶部边框或顶部填充时,它包含内部 #siteler
的顶部边距。当没有边框或填充分隔它们的边距时,它们将合并为一个边距,使它们都移动。
为防止出现这种情况,您可以从 #siteler
中删除 margin-top:195px;
并将 height:230px;
替换为 高度:35px; padding-top: 195px
for #baslik
.
关于css - div 无边框移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17604943/