0

The text inside <p> and <a> is not on the same horizontal line, why? I have tried with display: inline-block or text-align and it does not seem to work. How is it possible to change <p>'s text to make it on the same line of <a>'s text and the other way round? The only way I can think is changing the padding in a trial and error fashion. Is there any other more intelligent way?

.down {
    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    color: rgb(41, 41, 41);
}
#fright {
    background: rgb(220, 20, 60, 0.7);
    color: #fff;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 8px;
    text-align: end;
}

#fleft {
    background: rgb(220, 20, 60, 0.7);
    color: #fff;
    padding: 14px 30px;
    border-radius: 8px;
}

#heart {
    color: red;
    font-size: 20px;
}
<footer class="down">
        <p id="fleft">Made with <span id="heart">♡</span> in Seattle</p>
        <a id="fright" href="#">Contact Me</a>
    </footer>
Matteo
  • 79
  • 8

2 Answers2

2

You've got two issues. <p> elements have default top and bottom margins, so you need to remove them with #fleft { margin:0 }

Second, the font-size of the heart is making the line heights of the two elements different. You can correct that by setting the line-height of the heart to 0.

.down {
    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    color: rgb(41, 41, 41);
}
#fright {
    background: rgb(220, 20, 60, 0.7);
    color: #fff;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 8px;
    text-align: end;
}

#fleft {
    background: rgb(220, 20, 60, 0.7);
    color: #fff;
    padding: 14px 30px;
    border-radius: 8px;
    margin: 0;
}

#heart {
    color: red;
    font-size: 20px;
    line-height: 0;
}
<footer class="down">
    <p id="fleft">Made with <span id="heart">♡</span> in Seattle</p>
    <a id="fright" href="#">Contact Me</a>
</footer>
Alohci
  • 78,296
  • 16
  • 112
  • 156
0

Flex

When you use, display:flex; , two default flex proeprties are applied with:

  1. flex-direction: row
  2. align-items: stretch - Its content is strached. And the shortest (in terms of height) takes as much as space as available.

You need to change its align-items so that its contents take as much space as they need. Use align-items: center; on .down to do so.

.down {
  display: flex;
  justify-content: space-between;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  color: rgb(41, 41, 41);
  align-items: center;
  /* NEW */
}

#fright {
  background: rgb(220, 20, 60, 0.7);
  color: #fff;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 8px;
  text-align: end;
}

#fleft {
  background: rgb(220, 20, 60, 0.7);
  color: #fff;
  padding: 14px 30px;
  border-radius: 8px;
}

#heart {
  color: red;
  font-size: 20px;
  line-height: 0; // NEW
}
<footer class="down">
  <p id="fleft">Made with <span id="heart">♡</span> in Seattle</p>
  <a id="fright" href="#">Contact Me</a>
</footer>

Visit this question which is similar to yours. But not the same.

How to make a flex item not fill the height of the flex container?

mahan
  • 12,366
  • 5
  • 48
  • 83