0

I found a trick to remove double borders when aligning elements with flex, but it doesn't seem to work properly and I'm wondering what I'm doing wrong. Some double borders disappear, some are still there. Can anyone explain why this is happening?

The trick was to set margin-right and margin-bottom to a negative value equal to border width, which I found quite interesting.

And I want to make it work like this, because I know it can.

.glossary-wrapper a:focus,
.glossary-wrapper a:hover {
    background-color: #f0f4f8;
    color: #486581;
}

.glossary-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.glossary-wrapper .glossary-letter {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    transition: 0.2s ease-in-out;
    align-items: center;
    border: 0.1rem solid #a4b2c0;
    color: #829ab1;
    display: inline-flex;
    flex: 1;
    height: 3rem;
    justify-content: center;
    margin-bottom: -0.1rem;
    margin-right: -0.1rem;
    min-width: calc((100% / 13) + 0.1rem);
    text-transform: uppercase;
}

@media only screen and (min-width: 1367px) {
    .glossary-wrapper .glossary-letter {
        min-width: 3rem;
    }
}
<div class="glossary-wrapper">
<a href="#letter-a" class="glossary-letter">A</a>
<a href="#letter-b" class="glossary-letter">B</a>
<a href="#letter-c" class="glossary-letter">C</a>
<a href="#letter-d" class="glossary-letter">D</a>
<a href="#letter-e" class="glossary-letter">E</a>
<a href="#letter-f" class="glossary-letter">F</a>
<a href="#letter-g" class="glossary-letter">G</a>
<a href="#letter-h" class="glossary-letter">H</a>
<a href="#letter-i" class="glossary-letter">I</a>
<a href="#letter-j" class="glossary-letter">J</a>
<a href="#letter-k" class="glossary-letter">K</a>
<a href="#letter-l" class="glossary-letter">L</a>
<a href="#letter-m" class="glossary-letter">M</a>
<a href="#letter-n" class="glossary-letter">N</a>
<a href="#letter-o" class="glossary-letter">O</a>
<a href="#letter-p" class="glossary-letter">P</a>
<a href="#letter-q" class="glossary-letter">Q</a>
<a href="#letter-r" class="glossary-letter">R</a>
<a href="#letter-s" class="glossary-letter">S</a>
<a href="#letter-t" class="glossary-letter">T</a>
<a href="#letter-u" class="glossary-letter">U</a>
<a href="#letter-v" class="glossary-letter">V</a>
<a href="#letter-w" class="glossary-letter">W</a>
<a href="#letter-x" class="glossary-letter">X</a>
<a href="#letter-y" class="glossary-letter">Y</a>
<a href="#letter-z" class="glossary-letter">Z</a>
</div>
Mr. Fontastic
  • 302
  • 1
  • 12

0 Answers0