如何使用 CSS 调整链接的高度

Question

我在页脚中使用了一些 Fontface 矢量图标链接，无法调整包含链接的“页脚 a”的高度。我在它们周围放置了一个红色边框以突出问题。理想情况下，当在链接中切换时，边框只是图标的高度和宽度。

我将“footer a”包裹在它自己的 div("#footer-links") 中，但“footer a”似乎忽略了这一点，并且高度超出了 #footer-links 和页脚本身。

我尝试调整“页脚 a”的一些不同品质，但没有运气。有什么建议吗？

以下是 HTML 和 CSS：

/* CSS for all pages */

html {
  font-size: 16px;
  margin-left: 1rem;
  margin-right: 1rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

html,
body {
  height: 100%;
}

h2 {
  font-size: 34px;
}

h3 {
  font-size: 26px;
}


/*HEADER/NAVBAR*/

img {
  height: 45px;
  width: 300px;
}

header {
  padding-top: 0.5rem;
  display: inline-flexbox;
  border-bottom: black solid 2px;
}

h1 {
  margin: 0;
  display: inline;
  float: left;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: inline;
  margin-top: 0.3rem;
}

nav li {
  font-size: 16px;
  float: left;
}

nav li:hover {
  font-weight: bold;
}

nav::after {
  content: "";
  display: block;
  clear: both;
}

nav a {
  display: block;
  padding: 0.7rem;
  text-decoration: none;
  color: black;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.1rem;
  height: 10px;
}

.border {
  border-right: 1px solid black;
}

#games-ul {
  background: white;
  font-weight: lighter;
  display: none;
  position: absolute;
  top: 47px;
}

#games-li li {
  float: none;
  font-size: 0.9rem;
  height: 30px;
}

#games-li:hover>ul {
  display: block;
}


/*FOOTER*/

footer {
  width: 100%;
  height: 60px;
  bottom: 0;
  position: fixed;
}

#footer-wrap {
  height: 60px;
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}

#footer-copy {
  border-top: 2px solid black;
  width: 65%;
  font-size: 12px;
  padding-top: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  display: inline;
  position: absolute;
}

#footer-links {
  display: inline;
  float: right;
  margin-top: 5px;
}

footer a {
  color: inherit;
  font-size: 46px;
  border: 1px solid red;
  margin-left: 3px;
  margin-right: 3px;
}


/* INDEX ONLY */

#testimonial {
  margin-top: 50px;
  margin-bottom: 20px;
  margin-left: 18%;
  width: 1000px;
  font-weight: bold;
  position: relative;
}

#quote {
  margin-left: 18%;
  margin-right: 18%;
  margin-bottom: 1.5rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.5rem;
  max-width: 800px;
  height: fit-content;
  color: green;
  display: block;
}

#author {
  margin-top: 5px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  text-align: center;
}

#grids {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(1, 1fr);
  grid-template-rows: repeat(1, 250px);
  gap: 4rem;
  max-width: 900px;
  min-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 70px;
}

#grid1 {
  grid-column: 1 / 2;
  grid-row: 1 / -1;
}

#grid2 {
  grid-column: 2 / -1;
  grid-row: 1;
}

article {
  margin: auto;
  font-size: 17px;
}

.button-link {
  padding: 0.7em 1.4em;
  margin: 0 0.3em 0.3em 0;
  border: 1px solid white;
  border-radius: 0.2em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  color: #FFFFFF;
  background-color: rgb(194, 192, 192);
  float: right;
  right: 20px;
  position: relative;
  top: 10px;
}

button:hover {
  border: 1px solid black;
  cursor: pointer;
}

button:active {
  border: 1px solid black;
}


/*ABOUT*/

#about-div {
  margin: auto;
  width: 500px;
}


/* form styling */

.form-div {
  margin: auto;
  width: 430px;
}

#login-div {
  margin-top: 30px;
}

#register-div {
  margin-top: 30px;
}

#contact-div {
  margin-top: 10px;
}

.form-div h2 {
  margin-bottom: 10px;
}

form {
  margin: auto;
  width: 430px;
}

label {
  display: block;
  font-weight: 700;
  margin-top: 5px;
}

input {
  font-size: large;
  width: 430px;
  margin-top: 10px;
  border: 1px solid black;
  border-radius: 0.2em;
  box-sizing: border-box;
}

input[type='submit'] {
  padding: 0.7em;
  margin-top: 15px;
  margin-left: 45%;
  border: 1px solid white;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  color: #FFFFFF;
  background-color: rgb(194, 192, 192);
  width: fit-content;
}

input[type='submit']:hover {
  cursor: pointer;
  border: 1px solid black;
}

input[type='submit']:active {
  border: 1px solid black;
}

input[type='submit']:focus {
  border: 1px solid black;
}

input:focus:not([type=submit]) {
  background-color: #ededed;
  border: 2px solid black;
}

label[for='terms'] {
  display: inline;
  font-weight: normal;
}

#checkbox-div {
  margin-top: 5px;
}

input[type='checkbox'] {
  margin: 10px 0;
  width: auto;
}

#register-div {
  /*Hides Registration Div*/
  display: none;
}

#contactMessage {
  border: 1px solid black;
  border-radius: 0.2em;
  resize: none;
  width: 100%;
  height: 120px;
  margin-top: 10px;
  box-sizing: border-box;
}

#contactMessage:focus {
  background-color: #ededed;
  border: 2px solid black;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

<header>
  <h1><img src="logo.png" alt="logo"></h1>
  <nav>
    <ul>
      <li><a class="border" href="index.html">Home</a></li>
      <li id="games-li"><a class="border" href="#">Games</a>
        <ul id="games-ul">
          <li><a href="games/anagram-hunt.html">Anagram Hunt </a></li>
          <li><a href="games/math-facts.html">Math Facts Practice</a></li>
        </ul>
      </li>
      <li><a class="border" href="about.html">About</a></li>
      <li><a href="login.html">Login </a></li>
    </ul>
  </nav>
</header>
<main>
  <div id="testimonial"></div>
  <div id="quote"></div>
  <div id="author"></div>
  <section id="grids">
    <div id="grid1">
      <h3 class="article-title">Anagram Hunt</h3>
      <article id="article1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cura bitur tristique odio ac sem congue luctus. Praesent vel rutrum lectus. Nam mattis finibus odio. Suspendisse ligula orci, ullamcorper vitae nulla nec, tempor auctor felis. Sed eu luctus
        sem.
      </article>
      <a class="button-link" href="games/anagram-hunt.html" title="Play Anagram Hunt">Play</a>
    </div>
    <div id="grid2">
      <h3 class="article-title">Math Facts Practice</h3>
      <article id="article2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cura bitur tristique odio ac sem congue luctus. Praesent vel rutrum lectus. Nam mattis finibus odio. Suspendisse ligula orci, ullamcorper vitae nulla nec, tempor auctor felis. Sed eu luctus
        sem.
      </article>
      <a class="button-link" href="games/math-facts.html" title="Play Math Facts Practice">Play</a>
    </div>
  </section>
</main>
<footer>
  <div id="footer-wrap">
    <div id="footer-copy">

      &#169 2021 Play2Learn
    </div>
    <div id="footer-links">


      <a href="contact-us.html" title="Contact Us"><i class="fas fa-envelope-square"></i></a>
      <a href="https://instagram.com" title="Instagram"><i class="fab fa-instagram-square"></i></a>
      <a href="https://twitter.com" title="Twitter"><i class="fab fa-twitter-square"></i></a>
      <a href="https://facebook.com" title="Facebook"><i class="fab fa-facebook-square"></i></a>

    </div>
  </div>
</footer>

Answer 1

注意以下元素的css变化：

页脚

#footer-wrap

#footer-links

页脚a

.fab, .fas

/* CSS for all pages */

html {
  font-size: 16px;
  margin-left: 1rem;
  margin-right: 1rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

html,
body {
  height: 100%;
}

h2 {
  font-size: 34px;
}

h3 {
  font-size: 26px;
}


/*HEADER/NAVBAR*/

img {
  height: 45px;
  width: 300px;
}

header {
  padding-top: 0.5rem;
  display: inline-flexbox;
  border-bottom: black solid 2px;
}

h1 {
  margin: 0;
  display: inline;
  float: left;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: inline;
  margin-top: 0.3rem;
}

nav li {
  font-size: 16px;
  float: left;
}

nav li:hover {
  font-weight: bold;
}

nav::after {
  content: "";
  display: block;
  clear: both;
}

nav a {
  display: block;
  padding: 0.7rem;
  text-decoration: none;
  color: black;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.1rem;
  height: 10px;
}

.border {
  border-right: 1px solid black;
}

#games-ul {
  background: white;
  font-weight: lighter;
  display: none;
  position: absolute;
  top: 47px;
}

#games-li li {
  float: none;
  font-size: 0.9rem;
  height: 30px;
}

#games-li:hover>ul {
  display: block;
}


/*FOOTER*/

footer {
  width: 100%;
  bottom: 0;
  position: fixed;
}

#footer-wrap {
  
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}

#footer-copy {
  border-top: 2px solid black;
  width: 65%;
  font-size: 12px;
  padding-top: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  display: inline;
  position: absolute;
}

#footer-links {
  display: flex;
  flex-flow: row;
  float: right;
  margin-top: 5px;
  margin-bottom: 5px;
}

footer a {
  display: flex;
  flex-flow: row;
  color: inherit;
  font-size: 36px;
  border: 1px solid red;
  margin-left: 3px;
  margin-right: 3px;
  padding: 0;
  text-decoration: none;
}

.fas, .fab{
padding: 0px !important;
margin: 0px;
height: auto;
}


/* INDEX ONLY */

#testimonial {
  margin-top: 50px;
  margin-bottom: 20px;
  margin-left: 18%;
  width: 1000px;
  font-weight: bold;
  position: relative;
}

#quote {
  margin-left: 18%;
  margin-right: 18%;
  margin-bottom: 1.5rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.5rem;
  max-width: 800px;
  height: fit-content;
  color: green;
  display: block;
}

#author {
  margin-top: 5px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  text-align: center;
}

#grids {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(1, 1fr);
  grid-template-rows: repeat(1, 250px);
  gap: 4rem;
  max-width: 900px;
  min-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 70px;
}

#grid1 {
  grid-column: 1 / 2;
  grid-row: 1 / -1;
}

#grid2 {
  grid-column: 2 / -1;
  grid-row: 1;
}

article {
  margin: auto;
  font-size: 17px;
}

.button-link {
  padding: 0.7em 1.4em;
  margin: 0 0.3em 0.3em 0;
  border: 1px solid white;
  border-radius: 0.2em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  color: #FFFFFF;
  background-color: rgb(194, 192, 192);
  float: right;
  right: 20px;
  position: relative;
  top: 10px;
}

button:hover {
  border: 1px solid black;
  cursor: pointer;
}

button:active {
  border: 1px solid black;
}


/*ABOUT*/

#about-div {
  margin: auto;
  width: 500px;
}


/* form styling */

.form-div {
  margin: auto;
  width: 430px;
}

#login-div {
  margin-top: 30px;
}

#register-div {
  margin-top: 30px;
}

#contact-div {
  margin-top: 10px;
}

.form-div h2 {
  margin-bottom: 10px;
}

form {
  margin: auto;
  width: 430px;
}

label {
  display: block;
  font-weight: 700;
  margin-top: 5px;
}

input {
  font-size: large;
  width: 430px;
  margin-top: 10px;
  border: 1px solid black;
  border-radius: 0.2em;
  box-sizing: border-box;
}

input[type='submit'] {
  padding: 0.7em;
  margin-top: 15px;
  margin-left: 45%;
  border: 1px solid white;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  color: #FFFFFF;
  background-color: rgb(194, 192, 192);
  width: fit-content;
}

input[type='submit']:hover {
  cursor: pointer;
  border: 1px solid black;
}

input[type='submit']:active {
  border: 1px solid black;
}

input[type='submit']:focus {
  border: 1px solid black;
}

input:focus:not([type=submit]) {
  background-color: #ededed;
  border: 2px solid black;
}

label[for='terms'] {
  display: inline;
  font-weight: normal;
}

#checkbox-div {
  margin-top: 5px;
}

input[type='checkbox'] {
  margin: 10px 0;
  width: auto;
}

#register-div {
  /*Hides Registration Div*/
  display: none;
}

#contactMessage {
  border: 1px solid black;
  border-radius: 0.2em;
  resize: none;
  width: 100%;
  height: 120px;
  margin-top: 10px;
  box-sizing: border-box;
}

#contactMessage:focus {
  background-color: #ededed;
  border: 2px solid black;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

<header>
  <h1><img src="logo.png" alt="logo"></h1>
  <nav>
    <ul>
      <li><a class="border" href="index.html">Home</a></li>
      <li id="games-li"><a class="border" href="#">Games</a>
        <ul id="games-ul">
          <li><a href="games/anagram-hunt.html">Anagram Hunt </a></li>
          <li><a href="games/math-facts.html">Math Facts Practice</a></li>
        </ul>
      </li>
      <li><a class="border" href="about.html">About</a></li>
      <li><a href="login.html">Login </a></li>
    </ul>
  </nav>
</header>
<main>
  <div id="testimonial"></div>
  <div id="quote"></div>
  <div id="author"></div>
  <section id="grids">
    <div id="grid1">
      <h3 class="article-title">Anagram Hunt</h3>
      <article id="article1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cura bitur tristique odio ac sem congue luctus. Praesent vel rutrum lectus. Nam mattis finibus odio. Suspendisse ligula orci, ullamcorper vitae nulla nec, tempor auctor felis. Sed eu luctus
        sem.
      </article>
      <a class="button-link" href="games/anagram-hunt.html" title="Play Anagram Hunt">Play</a>
    </div>
    <div id="grid2">
      <h3 class="article-title">Math Facts Practice</h3>
      <article id="article2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cura bitur tristique odio ac sem congue luctus. Praesent vel rutrum lectus. Nam mattis finibus odio. Suspendisse ligula orci, ullamcorper vitae nulla nec, tempor auctor felis. Sed eu luctus
        sem.
      </article>
      <a class="button-link" href="games/math-facts.html" title="Play Math Facts Practice">Play</a>
    </div>
  </section>
</main>
<footer>
  <div id="footer-wrap">
    <div id="footer-copy">

      &#169 2021 Play2Learn
    </div>
    <div id="footer-links">


      <a href="contact-us.html" title="Contact Us"><i class="fas fa-envelope-square"></i></a>
      <a href="https://instagram.com" title="Instagram"><i class="fab fa-instagram-square"></i></a>
      <a href="https://twitter.com" title="Twitter"><i class="fab fa-twitter-square"></i></a>
      <a href="https://facebook.com" title="Facebook"><i class="fab fa-facebook-square"></i></a>

    </div>
  </div>
</footer>

经验： 页脚： 移除了固定高度。以便页脚换行区域获得其内容的高度。

#页脚换行： 显示从内联更改为 flex。以便可以操纵子元素的高度。

页脚 显示更改为 inline-block 到 flex 和 flex-flow ：row 使内容与其父级（也是一个 flex）对齐，

text-decoration: none ==>> font awesome 是一种字体，默认情况下有下划线，所以没有。

.fab .fas ==>> 如果字体真棒具有默认填充，则删除填充/边距。

进一步参考：here