CSS, the padding is over the margin
Question
So, I don't know why, but when I add margin to li tag it doesn't work! So, the li is over the 10px margin that I gave in the class .topo (look at the example in 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;
}
I put width and height in the img just to show you the space for the icon.
here is the code in jsfiddle: http://jsfiddle.net/ecxraovk/ Thanks!
1 answers
solution1
0 2015-08-27 00:06:05
The long story short: you're not clearing the ul and then you're putting extra padding on the anchors that cause it to go outside of the li elements. The padding isn't going over the margin... it's just the margin is being applied to the ul which is smaller than the li's... its a bit how the DOM works, since you "removed" it from the flow via a float. My suggestion is to remove the border and padding on the anchors and then add it to the li's, then clearfix the UL's... then your margin can be margin: 0 10px; something like this below:
@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>
The a's are different from the li's and you couldn't see the li's because you had no special styling applied to it
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.