CSS，邊距超出邊距
[英]CSS, the padding is over the margin
問題描述
因此，我不知道為什么，但是當我在li標簽中添加邊距時，它不起作用！ 因此，li超出了我在.topo類中給定的10px邊距（請看jsfiddle中的示例！）
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Início</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/estilo.css" />
</head>
<body>
<section class="topo">
<figure class="logo-topo">
<img src="imagens/logo-icon.png" width="32px" height="32px"/>
</figure>
<nav class="navegador-topo">
<ul class="lista-topo">
<li class="ativo"><a href="#">HOME</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
</ul>
</nav>
</section>
</body>
</html>
estilo.css
@charset "utf-8";
*{
margin:0px;
padding:0px;
font:100%;
}
.topo {
background-color: #FF5050;
padding-top: 10px;
padding-bottom: 10px;
box-sizing:border-box;
position: relative;
}
.topo::after{
content: "";
clear:both;
display: block;
}
.topo .logo-topo{
float:left;
margin:0px 10px 0px 10px;
}
.topo .navegador-topo{
float:right;
margin:5px 10px 0px 10px;
}
.topo .lista-topo{
list-style: none;
}
.topo .lista-topo li{
display:inline;
font-size: 1.1rem;
font-family: Verdana;
}
.topo .lista-topo li a{
text-decoration: none;
color:#FFF;
border:1px solid #FFF;
padding: 10px;
transition:all 0.5s;
}
.topo .lista-topo li a:hover,.topo .lista-topo li a:focus{
background-color:#FF7373;
}
我在img中放置了寬度和高度，只是為了向您展示圖標的空間。
這是jsfiddle中的代碼： http : //jsfiddle.net/ecxraovk/謝謝！
1 個解決方案
解決方案1
0 2015-08-27 00:06:05
長話短說：您沒有清除ul，然后在錨點上添加了額外的填充，導致其超出li元素。 填充不會超出邊距...只是將邊距應用於小於li的ul ...這有點像DOM的工作原理，因為您是通過DOM從流中“刪除”了它的浮動。 我的建議是刪除邊界和錨點上的填充，然后將其添加到li的邊界，然后清除UL的邊界...然后，您的邊距可以是margin：0 10px; 如下所示：
@charset "utf-8"; * { margin: 0px; padding: 0px; font: 100%; } .topo { background-color: #FF5050; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; position: relative; } .topo::after { content: ""; clear: both; display: block; } .topo .logo-topo { float: left; margin: 0px 10px 0px 10px; } .topo .navegador-topo { float: right; margin: 0 10px; } .topo .lista-topo { list-style: none; } .topo .lista-topo li { display: inline; font-size: 1.1rem; font-family: Verdana; border: 1px solid #FFF; padding: 10px; transition: all 0.5s; margin-left: 10px; } .topo .lista-topo li a { text-decoration: none; color: #FFF; } .topo .lista-topo li:hover, .topo .lista-topo li:focus { background-color: #FF7373; }
<section class="topo cf"> <figure class="logo-topo"> <img src="imagens/logo-icon.png" width="32px" height="32px" /> </figure> <nav class="navegador-topo"> <ul class="lista-topo topo"> <li class="ativo"><a href="#">HOME</a> </li> <li><a href="#">HTML</a> </li> <li><a href="#">CSS</a> </li> <li><a href="#">JAVASCRIPT</a> </li> </ul> </nav> </section>
a與li不同，您看不到li，因為您沒有應用特殊的樣式
CSS填充和邊距不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.