CODEWITHSUNDEEP
htmlcss
Jack Boyd
Jack Boyd

Reputation: 45

Margins appearing around padded links

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>

Upvotes: 4

Views: 101

Answers (4)

Sujeet Jaiswal
Sujeet Jaiswal

Reputation: 1089

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]

  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]
  2. (Modifying HTML) commenting between lines to avoid inline space (which is a not a proper solution in my opinion)
  3. 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>

Upvotes: 2

Ahmed Alaa
Ahmed Alaa

Reputation: 124

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 enter image description here

Upvotes: 0

Frutis
Frutis

Reputation: 489

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

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

Upvotes: 0

valerio0999
valerio0999

Reputation: 12138

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}

Upvotes: 0

Related Questions