超链接不接受填充属性

Question

我的CSS有点问题：

• 我有一个超链接元素，它不接受我分配给它的垂直填充。

这是我的HTML的一部分：

<a href='#' class='big_button'>Show more comments</a>

这是我正在使用的CSS：

.big_button{
    height:auto;
    position:relative;
    display:block;
    font-size:2em;
    padding:.5em 0;
    background:blue;
    text-align:center;
}

记录：我的[body]字体大小为10px，因此2em = 20px，因此.5em = 10px。

填充不起作用。

有人可以帮我这个吗？提前致谢。

编辑：谢谢你的回复，这是我的其余代码：

    <header id='header'>

    </header>


    <div id='main_container'>

        <div class='medium_sizer'>


            <header class='post'>
                <h1>
                    On flying monobrows
                </h1>
                <aside class='date'>
                    Date: 15 June <a href='#'>2019</a>
                    &nbsp;&middot;&nbsp;
                    Category: <a href='#'>Articles</a>
                </aside>

                <aside class='social'>
                    <div class='decoration left'></div>
                    <ul>
                        <li>
                            <a href='#'>
                                Share via email
                            </a>
                        </li>
                        <li class='sep'>&middot;</li>
                        <li>
                            <a href='#'>
                                Tweet
                            </a>
                        </li>
                        <li class='sep'>&middot;</li>
                        <li>
                            <a href='#'>
                                Facebook Share
                            </a>
                        </li>
                        <li class='sep'>&middot;</li>
                        <li>
                            <a href='#'>
                                Facebook Like
                            </a>
                        </li>
                        <li class='sep'>&middot;</li>
                        <li>
                            <a href='#'>
                                Google +1
                            </a>
                        </li>
                    </ul>

                    <div class='decoration right'></div>
                </aside>

            </header>


            <article class='post'>

                    <p>
                        <b>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque&nbsp;explicabo. 
                        </b>

                        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam et <i>natte peperkoek</i> aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil <mark>molestiae</mark> consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla&nbsp;pariatur?
                    </p>

            </article>

            <footer class='post'>

                <aside class='social'>
                    <div class='decoration left'></div>
                    <ul>
                        <li>
                            <a href='#'>
                                Share via email
                            </a>
                        </li>
                        <li class='sep'>&middot;</li>
                        <li>
                            <a href='#'>
                                Tweet
                            </a>
                        </li>
                        <li class='sep'>&middot;</li>
                        <li>
                            <a href='#'>
                                Facebook Share
                            </a>
                        </li>
                        <li class='sep'>&middot;</li>
                        <li>
                            <a href='#'>
                                Facebook Like
                            </a>
                        </li>
                        <li class='sep'>&middot;</li>
                        <li>
                            <a href='#'>
                                Google +1
                            </a>
                        </li>
                    </ul>

                    <div class='decoration right'></div>
                </aside>

            </footer>

            <aside id='comments'>
                <header>
                    <h2>Discussion</h2>
                </h2>
                <ul id='comment_list'>
                    <li>
                        <div class='meta'>
                            on 14 august 2010 <br/>
                            <b>Kevin63</b> wrote:

                        </div>
                        <article>
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia&nbsp;voluptas.
                        </article>
                    </li>

                    <li>
                        <div class='meta'>
                            on 1 January 2011 <br/>
                            <b>bjoajegwf eiofjwa</b> wrote:

                        </div>
                        <article>
                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed&nbsp;quia.
                        </article>
                    </li>

                    <li class='author'>
                        <div class='meta'>
                            on 4 January 2011 <br/>
                            <b>bla bla</b> wrote:

                        </div>
                        <article>
                            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore&nbsp;magnam.
                        </article>
                    </li>

                </ul>

                <a class='big_button' href='#'>
                    Show more comments
                </a>

                <h3>Leave a comment</h3>

                <form class='comment'>

                    <div class='field'>
                        <div class='name'>Your name:</div>
                        <input type='text'/>
                    </div>

                    <div class='field'>
                        <div class='name'>Email address:</div>
                        <input type='text'/>
                        <small>Your email address will not be shown publicly, nor will it be shared with any third party.</small>
                    </div>

                    <div class='field' style='display:none;'>
                        <div class='name'>Confirm email address:</div> <!--this is a h0n3yPodt-->
                        <input type='text'/>
                    </div>

                    <div class='field'>
                        <div class='name'>Your comment:</div>
                        <textarea></textarea>
                    </div>

                    <input class='submit' type='submit' value='Submit comment'/>

                </form>

            </aside>

        </div> <!--end medium_sizer div-->




        <aside class='sidebar'>

            <section id='news'>
                <h2>
                    News
                </h2>

                <p>
                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia&nbsp;animi.
                </p>
                <p>
                    id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio&nbsp;cumque.
                </p>

                <footer>
                    Date: 7 October 2006 &middot; <a href='#'>View archives</a>
                </footer>
            </section>

            <section id='facebook_like_box'>
                <h4>
                    'Like' me
                </h4>
                <p>
                    This feature is currently not available.
                </p>
            </section>

            <section id='twitter_follow_box'>
                <h4>
                    Follow me on Twitter
                </h4>
                <p>
                    This feature is currently not available either, sorry.
                </p>
            </section>

        </aside> <!--end sidebar aside-->




    </div>


    <footer id='footer'>

    </footer>

</div>

和css（对不起，如果它看起来很奇怪，它是使用LESS生成的）：

/*------------------------------------------------------------*/
body {
  font-family: 'helvetica neue', 'arial', 'helvetica', sans-serif;
  margin: 0px;
  background-color: gray;
  font-size: 0.625em;
  /* font size is now 10px */

  line-height: 2.0em;
  /*leading is 20px*/

}
#wrapper {
  margin: 0 auto;
  min-width: 960px;
  max-width: 1200px;
}
#header {
  height: 80px;
}
#main_container {
  color: #222222;
  min-height: 300px;
  background: url('grid-patteern.jpg') #eeeeee;
  overflow: hidden;
  padding-bottom: 2em;
}
#footer {
  height: 60px;
}
/*------------------------------------------------------------*/
.medium_sizer {
  /* approx 75 - 95 symbols wide*/

  text-align: justify;
  margin-left: 1%;
  width: 60%;
  padding-left: 2%;
  padding-right: 2%;
  float: left;
}
.sidebar {
  /* approx 38 - 50 symbols wide*/

  text-align: left;
  margin-right: 1%;
  width: 30%;
  padding-left: 2%;
  padding-right: 2%;
  float: right;
}
.sidebar section {
  margin-bottom: 4em;
}
.sidebar section footer {
  font-size: 1.6em;
  font-variant: small-caps;
  font-family: 'Poly';
  color: #555555;
}
.sidebar section footer a:link {
  color: #4d6fb3;
  text-decoration: none;
}
.sidebar section footer a:visited {
  color: #4d6fb3;
  text-decoration: none;
}
.sidebar section footer a:hover {
  color: #3d528f;
  text-decoration: underline;
}
.sidebar section footer a:active {
  color: #3d528f;
  text-decoration: underline;
}
.full_sizer {
  text-align: left;
  margin-left: 1%;
  margin-right: 1%;
  float: left;
  width: 96%;
  padding-left: 2%;
  padding-right: 2%;
}
/*------------------------------------------------------------*/
header.post {
  text-align: center;
  padding: 2em 0 4em;
}
header.post aside.date {
  font-size: 1.6em;
  font-variant: small-caps;
  font-family: 'Poly';
  color: #555555;
  padding-bottom: 1.25em;
}
header.post aside.date a:link {
  color: #4d6fb3;
  text-decoration: none;
}
header.post aside.date a:visited {
  color: #4d6fb3;
  text-decoration: none;
}
header.post aside.date a:hover {
  color: #3d528f;
  text-decoration: underline;
}
header.post aside.date a:active {
  color: #3d528f;
  text-decoration: underline;
}
article.post {
  margin-bottom: 4em;
}
footer.post {
  text-align: center;
  margin-bottom: 2em;
}
aside.social {
  margin: 0 -20%;
  text-align: center;
  font-size: 1.6em;
  font-variant: small-caps;
  font-family: 'Poly';
  color: #555555;
  height: 1.25em;
}
aside.social a:link {
  color: #4d6fb3;
  text-decoration: none;
}
aside.social a:visited {
  color: #4d6fb3;
  text-decoration: none;
}
aside.social a:hover {
  color: #3d528f;
  text-decoration: underline;
}
aside.social a:active {
  color: #3d528f;
  text-decoration: underline;
}
aside.social ul {
  padding: 0px 1%;
  display: inline;
  vertical-align: top;
  list-style: none;
}
aside.social ul li {
  display: inline;
}
aside.social ul li.sep {
  margin: 0 .5%;
}
aside.social .decoration {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #aaaaaa;
}
#comments {
  min-height: 10em;
}
#comment_list {
  list-style: none;
  padding: 0;
}
#comment_list li {
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  text-align: left;
  font-size: 1.6em;
  background: #fff;
  padding: 1.25em 4%;
  margin: 1.25em 0;
}
#comment_list li .meta {
  font-size: 1.6em;
  font-variant: small-caps;
  font-family: 'Poly';
  color: #555555;
  font-size: 1em;
  width: 28%;
  float: left;
}
#comment_list li .meta a:link {
  color: #4d6fb3;
  text-decoration: none;
}
#comment_list li .meta a:visited {
  color: #4d6fb3;
  text-decoration: none;
}
#comment_list li .meta a:hover {
  color: #3d528f;
  text-decoration: underline;
}
#comment_list li .meta a:active {
  color: #3d528f;
  text-decoration: underline;
}
#comment_list li .meta b {
  color: #222222;
}
#comment_list li article {
  width: 70%;
  float: right;
}
#comment_list li.author {
  background: #bbddff;
}
/*------------------------------------------------------------*/
form.comment {
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  background: #fff;
  padding: 3em 4% 5em;
  margin: 2em 0;
}
form.comment div.field {
  overflow: hidden;
  padding: 1em 0;
  margin-bottom: 2em;
}
form.comment div.field small {
  margin-top: 1.4286em;
  float: right;
  width: 70%;
}
form.comment div.field .name {
  float: left;
  width: 28%;
  font-size: 1.6em;
  text-align: right;
  font-family: 'Poly';
  color: #555555;
}
form.comment input,
form.comment textarea {
  font-family: 'helvetica neue', 'arial', 'helvetica', sans-serif;
  font-size: 1.6em;
  margin: 0;
  margin: -0.25em 0;
  width: 70%;
  min-width: 70%;
  max-width: 70%;
  float: right;
}
form.comment input {
  height: 1.75em;
}
form.comment input.submit {
  height: auto;
  border: none;
  font-family: 'helvetica neue', 'arial', 'helvetica', sans-serif;
  position: relative;
  display: block;
  font-size: 2em;
  padding: .5em 0;
  background: #66aaff;
  text-align: center;
  color: white;
  text-decoration: none;
}
form.comment input.submit:link {
  color: white;
  text-decoration: none;
}
form.comment input.submit:visited {
  color: white;
  text-decoration: none;
}
form.comment input.submit:hover {
  color: white;
  text-decoration: none;
}
form.comment input.submit:active {
  color: white;
  text-decoration: none;
}
form.comment textarea {
  height: 13em;
  max-height: 13em;
  min-height: 13em;
}
/*------------------------------------------------------------*/
.padded {
  padding-left: 2%;
  padding-right: 2%;
}
.clearfloat {
  overflow: hidden;
}
.hide-text {
  overflow: hidden;
  text-indent: 110%;
  white-space: nowrap;
}
.meta_text {
  font-size: 1.6em;
  font-variant: small-caps;
  font-family: 'Poly';
  color: #555555;
}
.meta_text a:link {
  color: #4d6fb3;
  text-decoration: none;
}
.meta_text a:visited {
  color: #4d6fb3;
  text-decoration: none;
}
.meta_text a:hover {
  color: #3d528f;
  text-decoration: underline;
}
.meta_text a:active {
  color: #3d528f;
  text-decoration: underline;
}
.text {
  font-size: 1.6em;
}
.light {
  color: #555555;
}
.light a:link {
  color: #4d6fb3;
  text-decoration: none;
}
.light a:visited {
  color: #4d6fb3;
  text-decoration: none;
}
.light a:hover {
  color: #3d528f;
  text-decoration: underline;
}
.light a:active {
  color: #3d528f;
  text-decoration: underline;
}
.serif {
  font-family: 'Poly';
}
.sans {
  font-family: 'helvetica neue', 'arial', 'helvetica', sans-serif;
}
/*------------------------------------------------------------*/
.big_button {
  height: auto;
  border: none;
  font-family: 'helvetica neue', 'arial', 'helvetica', sans-serif;
  position: relative;
  display: block;
  font-size: 2em;
  padding: .5em 0;
  background: #66aaff;
  text-align: center;
  color: white;
  text-decoration: none;
}
.big_button:link {
  color: white;
  text-decoration: none;
}
.big_button:visited {
  color: white;
  text-decoration: none;
}
.big_button:hover {
  color: white;
  text-decoration: none;
}
.big_button:active {
  color: white;
  text-decoration: none;
}
/*------------------------------------------------------------*/
p {
  font-size: 1.6em;
  margin: 0 0 1.25em;
}
.sidebar p {
  margin: 0;
}
hr {
  padding: 0;
  margin: -1px 0 2em;
  height: 0px;
  border: 1px #aaaaaa solid;
  border-width: 1px 0 0;
}
strong {
  font-weight: bold;
  font-size: 2em;
  display: block;
  margin-bottom: 1em;
}
em {
  font-style: normal;
  font-variant: small-caps;
  font-weight: bold;
}
i {
  font-style: italic;
  font-variant: normal;
}
b {
  font-weight: bold;
}
mark {
  background: #ff6;
  margin: 0 -2px;
  padding: 0 2px;
}
small {
  font-size: 1.4em;
  color: #555555;
}
/*------------------------------------------------------------*/
code {
  text-align: left;
  font-family: 'monaco', monospace;
  font-size: 1.6em;
  line-height: 1.25em;
  background: #ddd;
  display: block;
  padding: 1.25em 2%;
  margin: 1.25em 0 1.25em 2%;
}
blockquote {
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  text-align: left;
  font-style: italic;
  font-size: 2em;
  font-family: 'Poly';
  background: white;
  padding: 1em 2% 1em 4%;
  margin: 1em 0;
}
blockquote footer {
  color: #555555;
  margin-top: 1.25em;
  font-size: .8em;
  text-align: right;
  font-variant: small-caps;
  font-style: normal;
}
blockquote footer a:link {
  color: #4d6fb3;
  text-decoration: none;
}
blockquote footer a:visited {
  color: #4d6fb3;
  text-decoration: none;
}
blockquote footer a:hover {
  color: #3d528f;
  text-decoration: underline;
}
blockquote footer a:active {
  color: #3d528f;
  text-decoration: underline;
}
/*------------------------------------------------------------*/
a:link {
  margin: -2px -4px;
  padding: 2px 4px;
  color: #0055ff;
  text-decoration: underline;
}
a:visited {
  color: #0055ff;
  text-decoration: underline;
}
a:hover {
  color: #0033cc;
  text-decoration: underline;
}
a:active {
  color: #0033cc;
  text-decoration: underline;
}
/*------------------------------------------------------------*/
h1 {
  font-family: 'Poly';
  font-weight: normal;
  margin: .33333em 0;
  font-size: 6em;
  line-height: 1em;
}
h2 {
  font-family: 'Poly';
  font-weight: normal;
  margin: .41667em 0;
  font-size: 4.8em;
  line-height: 1.25em;
}
h3 {
  font-family: 'Poly';
  font-weight: normal;
  margin: .55556em 0;
  font-size: 3.6em;
  line-height: 1.1111em;
}
h4 {
  font-family: 'Poly';
  font-weight: normal;
  margin: .71429em 0;
  font-size: 2.8em;
  line-height: 1.4286em;
}
h5 {
  font-family: 'Poly';
  font-weight: normal;
  margin: .83333em 0;
  font-size: 2.4em;
  line-height: .83333em;
}
h6 {
  font-family: 'Poly';
  font-weight: normal;
  margin: .95238em 0;
  font-size: 2.1em;
  line-height: .95238em;
}
.title {
  font-family: 'Poly';
  font-weight: normal;
}
/*------------------------------------------------------------*/

Answer 1

其实我不明白这里的阻塞问题是什么。如果你的意思是在顶部和底部都有10px padding，那么我说得对。

检查这个fiddle。

如果问题仍然存在，那么可能是由于外部div's问题可能存在。请提供更多代码。

更新后：

我现在知道了，说cheez .. :)

实际上，你的一个代码说：

a:link {
  padding: 2px 4px;
  //blah blah
}

此代码控制您之前或之后的所有填充。在尝试此代码时：

.big_button {
   padding: .5em 0;
   //blah blah
}

它试图给padding块，但被padding上的:link覆盖

我只是从padding: .5em 0;删除行.big_botton并将其粘贴在.big_button:link上...并且哇它的工作.. :)

.big_button:link {
   padding: .5em 0;
   //blah blah
}

这是你的小提琴：http://jsfiddle.net/Tavzd/3/