Margins appearing around padded links

Question

I'm making a set of navigation links. Whenever their :hover stylings are activated it becomes obvious that there is a small (maybe 2px?) margin all around the link. I've tried using margin:0; on the a styles to remove it, with no success. I've also tried setting margin:0; on the parent div, but again, no luck.

I've included the code in a snippet below to illustrate the problem. Does anyone know what is causing this and, in turn, how to fix it?

Thank you!

/* 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>

[This](https://gyazo.com/fca69b5174d4c96fd278fa6b3dd8e900) is how it looks on my screen (I changed the background colour to red to make it more obvious). I've cleared my cache and it still renders like this. — Jack Boyd, Apr 17 '16 at 19:51
It's due to letter spacing between inline elements. You could place all the s on the same line in the HTML or you could float them. — powerbuoy, Apr 17 '16 at 19:55
@powerbuoy, thank you! I can't use `float:left` because obviously it makes all of the links pull left instead of being center like they're supposed to be, and having all of the links on the same line makes the code look messy, but I suppose I'll have to put up with it. Mind putting it as an actual answer so I can accept it? — Jack Boyd, Apr 17 '16 at 20:15
Possible duplicate of [Two inline-block elements, each 50% wide, do not fit side by side in a single row](http://stackoverflow.com/questions/18262300/two-inline-block-elements-each-50-wide-do-not-fit-side-by-side-in-a-single-ro) — Vucko, Apr 18 '16 at 06:14

Sujeet Jaiswal · Accepted Answer · 2016-04-18T06:08:46.537

The reason for the spacing between the menu is not margin but the width of the inline element which in this case is space.

The possible solution for the problem are: [Working sample is attached for solution #1]

(Using CSS) setting the font-size to 0px of the container block and setting the font-size of the a tag to display the content. [see the snippet below]
(Modifying HTML) commenting between lines to avoid inline space (which is a not a proper solution in my opinion)
using float (which you don't want)

snippet for implementing solution #1

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

for implementing solution #2 (Not preffered)

<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>

score 0 · Answer 2 · answered Apr 17 '16 at 20:30

it's not margin it's white space. links are inline elements and the space you see is just whitespace. you can do two things:

1) have them like this in your html

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

but this is not suggested.

2) use the common ul and li structure for your menu

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

score 0 · Answer 3 · answered Apr 18 '16 at 05:30

0

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

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

answered Apr 18 '16 at 05:30

Frutis

489
3
16

score 0 · Answer 4 · answered Apr 18 '16 at 05:37

if you're talking about the 1px gap around the link when hovering, just adjust your padding to fill the space as the following:

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

like the image below

Margins appearing around padded links

4 Answers4