Chazy Chaz Chazy Chaz - 6 months ago 14
HTML Question

ul is applying styles but from where?

I'm having trouble to find the reason why a class named

nav
in
ul
element is applying styles.

I'm using the
nav
element to directly style it (without using classes). Then I gave my
ul
element a class named
nav
and is applying styles (but from where?).

I had to give my
ul
a
margin: 0
and it still have some left
padding
, where are these styles coming from?

I'm not too experienced with css and I'd appreciate the help.

This is where I reproduced it


body {
background-color: #fff;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
}
/* HEADER */

header {
min-height: 750px;
background: url(https://static.inmopaco.tk/images/banner2.jpg) no-repeat 0px 0px;
background-size: cover;
position: relative;
}
/* top bar menu */

.top-menu {
background: rgba(78, 197, 241, 0.81);
padding: 0.5em 0;
}
/* nav links */

nav {
background: none;
border: none;
margin: 2.2em 0 0;
float: left;
padding-left: 5%;
min-height: 50px;
}
nav:nth-child(3) {
float: right;
padding: 0 5% 0 0;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li {
margin: 0 1em;
}
nav ul > li {
float: left;
}
nav ul li a {
color: #fff;
font-size: 1.2em;
padding: 0;
font-weight: 600;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
}
nav ul li a:hover,
nav ul li a.active {
color: #000;
background: none;
}
nav ul li a::before {
position: absolute;
top: 65%;
left: 50%;
color: transparent;
content: '.';
text-shadow: 0 0 transparent;
font-size: 1.7em;
-webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s;
-o-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
nav ul li a:hover::before,
nav ul li a:focus::before,
nav ul li a.active::before {
color: #fff;
text-shadow: 10px 0 #000, -10px 0 #000;
}
/* logo */

.logo {
position: absolute;
left: 50%;
margin: 7px -90px 0;
}
.logo img {
width: 75%;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
nav:before,
nav:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
display: table;
content: " ";
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
nav:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
clear: both;
}

<body>
<header>
<div class="top-menu">
<nav>
<ul class="nav">
<li><a class="home active">Inicio</a>
</li>
<li><a class="services scroll">Servicios</a>
</li>
<li><a class="aboutus">Sobre Nosotros</a>
</li>
</ul>
</nav>
<a class="logo">
<img src="//static.inmopaco.tk/images/logo.png">
</a>
<nav>
<ul class="nav">
<li><a class="home">InscripciĆ³n</a>
</li>
<li><a class="services">Acceso</a>
</li>
</ul>
</nav>
<div class="clearfix"></div>
</div>
</header>
</body>




Answer

ul by default has margin and padding, and you only reset the margin, you have to reset padding as well


body {
  background-color: #fff;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}
/* HEADER */

header {
  min-height: 750px;
  background: url(https://static.inmopaco.tk/images/banner2.jpg) no-repeat 0px 0px;
  background-size: cover;
  position: relative;
}
/* top bar menu */

.top-menu {
  background: rgba(78, 197, 241, 0.81);
  padding: 0.5em 0;
}
/* nav links */

nav {
  background: none;
  border: none;
  margin: 2.2em 0 0;
  float: left;
  padding-left: 5%;
  min-height: 50px;
}
nav:nth-child(3) {
  float: right;
  padding: 0 5% 0 0;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0
}
nav ul li {
  margin: 0 1em;
}
nav ul > li {
  float: left;
}
nav ul li a {
  color: #fff;
  font-size: 1.2em;
  padding: 0;
  font-weight: 600;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
nav ul li a:hover,
nav ul li a.active {
  color: #000;
  background: none;
}
nav ul li a::before {
  position: absolute;
  top: 65%;
  left: 50%;
  color: transparent;
  content: '.';
  text-shadow: 0 0 transparent;
  font-size: 1.7em;
  -webkit-transition: text-shadow 0.3s, color 0.3s;
  -moz-transition: text-shadow 0.3s, color 0.3s;
  -o-transition: text-shadow 0.3s, color 0.3s;
  transition: text-shadow 0.3s, color 0.3s;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}
nav ul li a:hover::before,
nav ul li a:focus::before,
nav ul li a.active::before {
  color: #fff;
  text-shadow: 10px 0 #000, -10px 0 #000;
}
/* logo */

.logo {
  position: absolute;
  left: 50%;
  margin: 7px -90px 0;
}
.logo img {
  width: 75%;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
nav:before,
nav:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
nav:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}
<header>
  <div class="top-menu">
    <nav>
      <ul class="nav">
        <li><a class="home active">Inicio</a>
        </li>
        <li><a class="services scroll">Servicios</a>
        </li>
        <li><a class="aboutus">Sobre Nosotros</a>
        </li>
      </ul>
    </nav>
    <a class="logo">
      <img src="//static.inmopaco.tk/images/logo.png">
    </a>
    <nav>
      <ul class="nav">
        <li><a class="home">InscripciĆ³n</a>
        </li>
        <li><a class="services">Acceso</a>
        </li>
      </ul>
    </nav>
    <div class="clearfix"></div>
  </div>
</header>

Comments