html - 超链接不接受填充属性

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，因此 0.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;
}
/*------------------------------------------------------------*/

score 1 · Accepted Answer

其实我不明白这里的阻塞问题是什么。如果您的意思是在顶部和底部都有10px 填充，那么我做对了。

检查这个小提琴。

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

更新后：

我现在明白了，说cheez .. :)

实际上，您的代码之一是这样说的：

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

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

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

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

padding: .5em 0;我只是从中删除该行.big_botton并将其粘贴到.big_button:link...哇，它有效.. :)

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

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

html - 超链接不接受填充属性

1 回答 1

Related

Reference