为什么当我从链接中删除显示:内联块属性时会出现滚动条，是否有其他方法可以避免滚动条出现?

Question

为什么当我从链接中删除显示：内联块属性时会出现滚动条，是否有其他方法可以避免滚动条出现 php 文件 -

<main>
<div class="container">
<h2>Test Your PHP Knowledge</h2>
<p>This is a multiple choice quiz to test your knowledge of PHP</p>
<ul>
<li><strong>Number of Questions : </strong>5</li>
<li><strong>Type : </strong>Multiple Choice</li>
<li><strong>Estimated Time : </strong>4 Minutes</li>
</ul>
<a href="question.php?n=1" class="start">Start Quiz</a>
</div>
</main>

body{
font-family: arial;
font-size: 15px;
line-height: 1.6em;
}
.container{
width: 60%;
margin: 0 auto;
overflow: auto;
}
header{
border-bottom: 3px #f4f4f4 solid;
}
footer{
border-top: 3px #f4f4f4 solid;
text-align: center;
padding-top: 5px;
}
main{
padding-bottom: 20px;
height: auto;
overflow-y: auto;
}

下面的属性显示：内联块可以避免在主要区域滚动条

css 文件 -

a.start{
display: inline-block;
color: #666;
background: #f4f4f4;
border: 1px dotted #ccc;
padding: 6px 13px;
}

Answer 1

您可以看到为容器提供背景颜色时会发生什么。 这里发生的事情是，<a>的填充无助于增加容器的高度。

.container {
background:tan;
padding:1px .5em;
}
.container a {
padding:1em;
background:#eee;
border:1px solid;
}

<div class="container">
<p>Some text here</p>
<a>Some inline text here</a>
</div>

系统不使用<a>的填充来计算容器的高度，因此容器包含 a 的行高，但不包含底部填充。
所以<a>溢出容器。它的填充对其定位没有任何影响。(您还会看到<a>的顶部填充位于<p>的下边距内。

现在，如果你将<a>的显示模式更改为inline-block，整个画面就会改变：填充确实很重要;容器确实增长到包含它的填充，它的顶部填充不再侵入<p>的底部边缘。

.container {
overflow:visible;
background:tan;
padding:1px .5em;
}
.container a {
display:inline-block;
padding:1em;
background:#eee;
border:1px solid;
}

<div class="container">
<p>Some text here</p>
<a>Some inline-block text here</a>
</div>

所以有几个解决方案：

1. 接受事物的本来面目;保持<a>是内联块
2. 取下overflow:auto，使<a>从容器中排出。不过，这可能会影响容器下方屏幕上的元素
3. 不要在<a>上使用填充
4. 在<a>之后的容器中放入其他一些块或内联块元素。