元素获得不必要的余量
[英]Element getting unnecessary margin
问题描述
如您所见，nav元素的顶部填充过多。 链接的轮廓处在正确的位置，但还有多余的空间。 这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>'''+title+'''</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
<link rel="shortcut icon" href="/favicon.ico"/>
<style>
@import url(http://fonts.googleapis.com/css?family=Merriweather:400,700);
html, body {
margin: 0;
background: #333333;
height: 100%;
position: relative;
font-family: "merriweather";
overflow-y: hidden;
}
h1 {
font: bold 40pt roboto, arial, sans-serif;
margin: 0;
background: yellow;
padding: 30px;
}
nav {
display: inline-block;
}
nav a {
cursor: pointer;
font: bold 18px roboto;
display: inline-block;
transition-duration: 0.2s;
padding: 15px 30px;
background: linear-gradient(
#FF9900, #FF9900 50%, #333333 50%, #333333
/*outline: none;*/
);
background-size: 100% 200%;
color: black;
}
nav a:hover {
background-position: 100% 100%;
color: yellow;
}
nav a:focus {
outline:none;
}
#content-white-bkg {
background: white;
padding: 30px;
margin: 15px;
box-sizing: border-box;
overflow-y: scroll;
}
*:not(nav) > a:link {
cursor: pointer;
color: #FF9900;
transition-duration: 0.35s;
/*border-bottom: 1px solid #FF9900;*/
}
*:not(nav) > a:visited {
color: #FF6600;
cursor: pointer;
transition-duration: 0.35s;
}
*:not(nav) > a:hover, *:not(nav) > a:focus {
color: black;
outline: none;
}
a {
text-decoration: none;
color: black;
}
nav > a.selected {
background: #333333;
color: yellow;
text-shadow: 0 0 3px #FF9900, 0 0 5px #FF9900, 0 0 7px #FF9900, 0 0 10px #FF9900, 0 0 15px #FF9900;
transition-duration: 0.5s;
}
nav > a.selected:hover {
color: #333333;
}
::selection {
background: #FF7700;
}
::-webkit-selection {
background: #FF7700;
}
::-moz-selection {
background: #FF7700;
}
h3 {
font: bold 18px nunito;
margin-top: 0;
}
</style>
</head>
<body>
<h1 title='MUCAS: Multi-User Chat Application Server'>
<span><img width="95" height="53" title="" alt="" src="https://lh3.googleusercontent.com/-JNE2j3gX9mc/Vfn58paI2oI/AAAAAAAABRI/dqt4nqR5dZ4/w426-h238/MUCAS%2Blogo.jpeg"/></span>
<nav><a href="/" id="nav-/" tabindex="-1">Home/chat</a><a href="/login" id="nav-/login" tabindex="-1">Log in</a><a href="/sign-up" id="nav-/sign-up" tabindex="-1">Sign up</a><a href="/about" id="nav-/about" tabindex="-1">About MUCAS</a><a href="/contact" id="nav-/contact" tabindex="-1">Contact me</a></nav>
</h1>
<div id="content-white-bkg">
'''+body+'''
<script>
var cwb = document.getElementById("content-white-bkg");
document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
window.onresize = function() {
document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
}
var path = window.location.pathname;
document.getElementById("nav-"+path).className = "selected";
</script>
</div>
</body>
</html>
有人可以帮我吗？ 是布局问题还是其他？
5 个解决方案
解决方案1
3 已采纳 2015-09-16 23:48:18
尝试这个：
nav a {
vertical-align: top;
}
解决方案2
0 2015-09-17 10:22:09
检查浏览器中的开发人员工具。 选择nav元素，然后查看与该元素关联的CSS面板。 查看继承的样式和计算的样式。 导航的边距或填充是继承吗？ 可能是它的父元素或子元素被计算为零。 这可以是链接，列表，列表项或父项。 如果可以使用flexbox，我强烈建议您使用它来对齐组件和布局。
解决方案3
0 2015-09-17 10:37:45
你可以试试
nav {
vertical-align: super;
}
“垂直对齐：超级”会将您的“导航”视为上标。 我尝试将其放入您的代码中，发现它可以工作。 如果您认为可以解决问题，可以尝试。 谢谢。
解决方案4
0 2015-09-19 11:29:31
这应该可以解决问题：
nav a {
float: left;
}
我还应该将h1更改为div元素以获取语义。 h1例如用于页面标题，而不用于包装导航栏和徽标。
解决方案5
0 2015-10-02 13:50:29
您在这里做错了几件事。 您正在将导航项和图像放置在标题元素内。 您没有将float用于要浮动的元素。
改用它。
我做了一个jsfiddle来说明浮点数，而没有更正语义。
考虑做这样的事情：
<div class="header">
<img src="image.jpg">
<nav>...links here...</nav>
</div>
子跨度元素脱离父元素，flexbox / margin-填充问题
[英]Child span element getting out of parent element, flexbox / margin - padding issue
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.