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

Question

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

我把"；页脚a"；在它自己的div("#footer links"(中；页脚a"；似乎忽略了这一点，并且高度超出了#footer链接和footer本身。

我试着调整了"；页脚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中的变化：

页脚

#页脚换行

#页脚链接

页脚

.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>

EXP：页脚：移除固定高度。使得页脚换行区域获得其内容的高度。

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

页脚a显示更改为内联块以灵活和灵活流：行使内容与其父项(也是灵活项(对齐，

文本装饰：none=>gt；字体真棒是一种字体，默认情况下a有下划线，所以没有。

.fas=>gt；删除了填充/边距，如果字体真棒有默认填充。

进一步参考：此处