Gap between link and paragrath missing using css flexbox

Question

I'm using css flexbox for the first time and I am creating a paragraph with a link for my footer i.e.

<p class="footer--credit">link 2 <a href="#">company</a>.</p>

Flexbox somehow removes the gap after link 2, see here

body{
  background: red;
}.footer__contents {
    width: 100vw;
    height: 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: $white;
    background:pink;
}
a {
        color: $orange;
        text-decoration: none;
}
p {
        display: flex;
        align-items: center;
        justify-content: center;
}

<div class="footer__contents">
  <p class="footer--credit">link 2 <a href="#">company</a>.</p>
  <p class="footer--credit">link 1 <a href="#">company</a>.</p>
</div>

Any ideas?

please consider reading all the answer in the duplicate to understand why there is no gap and why you shouldn't use flexbox this way — Temani Afif, Apr 02 '19 at 13:46
you are already using CSS grid, so remove everything from the `p` and simply add to it `margin: auto;` to center — Temani Afif, Apr 02 '19 at 13:58

score 1 · Answer 1 · answered Apr 02 '19 at 13:46

1

Add white-space: pre-wrap;

body{
  background: red;
}.footer__contents {
    width: 100vw;
    height: 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: $white;
    background:pink;
}
a {
        color: $orange;
        text-decoration: none;
}
p {
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: pre-wrap;
}

<div class="footer__contents">
  <p class="footer--credit">link 2 <a href="#">company</a>.</p>
  <p class="footer--credit">link 1 <a href="#">company</a>.</p>
</div>

answered Apr 02 '19 at 13:46

Rence

2,900
2
23
40

OMG, I could not figure that out but I knew it was something silly like that. Thank you. – Dan Apr 02 '19 at 13:49
@Dan this is a *hack*, add line break or more space and you will have more issues (https://jsfiddle.net/3cf9ru0d/ / https://jsfiddle.net/3cf9ru0d/2/) – Temani Afif Apr 02 '19 at 13:50
@TemaniAfif do you have a solution? – Dan Apr 02 '19 at 13:53
@Dan added 2 duplicates with the needed solution .. you don't have to use flexbox with text container (here is another issue : https://jsfiddle.net/3cf9ru0d/4/) .. flexbox is not an automatic solution for everything. – Temani Afif Apr 02 '19 at 13:54

score 0 · Answer 2 · answered Apr 02 '19 at 13:46

You can resolve this issue by adding margin-left: 5px; in a CSS.

a {
    color: $orange;
    text-decoration: none;
    margin-left: 5px;
}

Another option you can use space HTML Entities.

HTML Entities Reference Link - https://www.w3schools.com/html/html_entities.asp

<div class="footer__contents">
  <p class="footer--credit">link 2&nbsp;<a href="#">company</a>.</p>
  <p class="footer--credit">link 1&nbsp;<a href="#">company</a>.</p>
</div>

body{
  background: red;
}.footer__contents {
    width: 100vw;
    height: 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: $white;
    background:pink;
}
a {
        color: $orange;
        text-decoration: none;
        margin-left: 5px;
}
p {
        display: flex;
        align-items: center;
        justify-content: center;
}

<div class="footer__contents">
  <p class="footer--credit">link 2 <a href="#">company</a>.</p>
  <p class="footer--credit">link 1 <a href="#">company</a>.</p>
</div>

Gap between link and paragrath missing using css flexbox

2 Answers2