CODEWITHSUNDEEP
htmlcss
Vega180
Vega180

Reputation: 806

Padding overflow of anchor elements <a>

I think a screenshot describes the issue the best:

padding problem

As you can see, the paddings "merge" into each other, but only vertically. Horizontally the padding is as expected (i.e. between Start and Leistungen). Why is there not more space between the header Physiotherapie, the middle line (Start Leistungen Kon) and Impressum?.

header #title {
  display: inline-block;
  padding: 0.5rem;
  margin-right: 1rem;
  font-size: 2rem;
}

header nav {
  display: inline-block;
}

header nav a {
  padding: 0.5rem;
  font-size: 1.25rem;
}
<header>
  <a id="title" href="index.html">Physiotherapie</a>
  <nav>
    <a href="index.html">Start</a>
    <a href="">Leistungen</a>
    <a href="">Kontakt</a>
    <a href="">Anfahrt</a>
    <a href="">Impressum</a>
  </nav>
</header>

P.S.: I'm using default box-sizing (content-box), but also if I use border-box, it makes no difference.

Upvotes: 0

Views: 233

Answers (1)

Mr Lister
Mr Lister

Reputation: 46559

Vertical padding is ignored for inline elements.
Solution: turn them into inline-blocks, then the padding will have an effect.

header #title {
    display: inline-block;
    padding: 0.5rem;
    margin-right: 1rem;
    font-size: 2rem;
}

header nav {
    display: inline-block;
}

header nav a {
    display:inline-block; /* added */
    padding: 0.5rem;
    font-size: 1.25rem;
}
<header>
    <a id="title" href="index.html">Physiotherapie</a>
    <nav>
        <a href="index.html">Start</a>
        <a href="">Leistungen</a>
        <a href="">Kontakt</a>
        <a href="">Anfahrt</a>
        <a href="">Impressum</a>
    </nav>
</header>

Upvotes: 4

Related Questions