html - 如何修复链接上的边框和填充

Question

我正在尝试修复我正在编辑的页面上的链接行，我无法直接编辑 HTML，只能编辑 CSS。无论出于何种原因，无论我做什么，链接的文本行都会溢出到其他行。

结果应该是这样的:

但是我明白了:

body {
    max-width:1122px;
    min-width:1122px;
}
.free_column{
    float:left;
    width:345px;
    height:315px;
    margin-right:10px;
    margin-left:12px;
    margin-top:20px;
    border:#d9d9d9 4px solid;

}
.free_column header{
    padding:14px;
}
.free_column h2{
    font-size:1.3em;
    color:#ffffff;
    font-family: 'Montserrat Subrayada', sans-serif;
    font-weight:200;
}
.free_column h3{
    font-size:.9em;
    color:#c3c2cc;
}
.free_column a{
    /*padding-left:64px;*/
    /*padding-right:150px;*/
    margin-top:20%;
    margin-left:18px;
    text-align:left;
    color:#667cbd;
    line-height:2.9em;
    border-top: #d1d1d1 2px dotted;
    padding-top:11px;
    font-size:1em;
}

.free_column header{
    background-color:#9f310e;

}

<section class="free_column">
    <header>
        <h2>Free Enterprise</h2>
        <h3>Free Enterprise - Your Home for Free Market News and Ideas</h3>
    </header>
    <a class="free_links" href="#">Military, Government, Business: Working Together</a>
    <a class="free_links" href="#">’Tis the Season for … Dangerous Fakes?</a>
    <a class="free_links" href="#">A Regulatory System That Works for America, Part II</a>
    <a class="free_links" href="#">The Fourth Branch of Government, Part I</a>
    <a class="free_links" href="#">Reducing Poverty and Raising Prosperity</a>
</section>

Answer 1

a 元素是内联元素，它们只会和它们的内容一样宽并且不会总是盒子形状，您可以使用以下方法覆盖此行为:

.free_column a{
   display: block;
}