Geek Answers Handbook

Fields appearing around paved links

I am making a set of navigation links. Whenever: hover styles are activated, it becomes obvious that there is a small one around the link (maybe 2px?). I tried using margin:0;in styles ato remove it, without any success. I also tried setting margin:0;to parent div, but again, no luck.

I have provided the code in the snippet below to illustrate the problem. Does anyone know what causes this and, in turn, how to fix it?

Thank!

/* Animations */
div#top > div#nav-container a:hover {
  color:#f7902b;
  background-color:#fff;
}

/* Regular CSS */
div#top {
  background-color:#333;
  padding-top:10px;
  padding-bottom:10px;
}
div#top > div#nav-container {
  text-align:center;
}
div#top > div#nav-container a {
  text-decoration:none;
  color:#fff;

  padding:10px 20px;

  transition:color 0.25s,background-color 0.5s;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/bootstrap/css/custom/nav.css" rel="stylesheet" />
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>
  <body>
    <div id="top" class="col-md-12">
      <div id="logo-container" style="margin:auto;width:200px;">
        <img src="assets/images/logo-banner.png" style="width:100%;" />
      </div>
      <hr style="margin:10px 0 10px 0;border-color:#444;" />
      <div id="nav-container">
        <a href="#">Breaking</a>
        <a href="#">Politics</a>
        <a href="#">Military</a>
        <a href="#">Economy</a>
        <a href="#">Development</a>
      </div>
    </div>
  </body>
</html>
Run codeHide result
+4
source share
4 answers

margin, , .

: [ # 1]

  • ( CSS), font-size to 0px font-size a . [. ]
  • ( HTML), , (, , )
  • float ( )

# 1

div#top > div#nav-container {
  text-align:center;
  font-size:0px;
}
div#top > div#nav-container a{
  font-size:15px;
}

# 2 ( )

<div id="nav-container"><!--
        --><a href="#">Breaking</a><!--
        --><a href="#">Politics</a><!--
        --><a href="#">Military</a><!--
        --><a href="#">Economy</a><!--
        --><a href="#">Development</a><!--
--></div>


/* Animations */
div#top > div#nav-container a:hover {
  color:#f7902b;
  background-color:#fff;
}

/* Regular CSS */
div#top {
  background-color:#333;
  padding-top:10px;
  padding-bottom:10px;
}
div#top > div#nav-container {
  text-align:center;
  font-size:0px;
}
div#top > div#nav-container a{
  font-size:15px;
}
div#top > div#nav-container a {
  text-decoration:none;
  color:#fff;

  padding:10px 20px;

  transition:color 0.25s,background-color 0.5s;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/bootstrap/css/custom/nav.css" rel="stylesheet" />
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>
  <body>
    <div id="top" class="col-md-12">
      <div id="logo-container" style="margin:auto;width:200px;">
        <img src="assets/images/logo-banner.png" style="width:100%;" />
      </div>
      <hr style="margin:10px 0 10px 0;border-color:#444;" />
      <div id="nav-container">
        <a href="#">Breaking</a>
        <a href="#">Politics</a>
        <a href="#">Military</a>
        <a href="#">Economy</a>
        <a href="#">Development</a>
      </div>
    </div>
  </body>
</html>
Hide result
+2

. , , , . :

1) html

<a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a>

.

2) ul li

3) div#top > div#nav-container a {display:inline-block}

0

Not sure if this is the right way, but it works.

div#nav-container a {
    margin-right: -4px;
}
0
source

if you're talking about a 1px gap around the link when it hangs, just tweak your own paddingto fill in the gap like this:

div#top > div#nav-container a {
    text-decoration: none;
    color: #fff;
    padding: 11px 20px;
    transition: color 0.25s,background-color 0.5s;
}

as picture below enter image description here

0
source

More articles:


All Articles