2

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;
}

記録のために: 私の [本文] のフォントサイズは 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;
}
/*------------------------------------------------------------*/
4

1 に答える 1

1

実際、ここでのブロッキングの問題が何であるかわかりません。上と下の両方に10px パディングを入れるつもりなら、私はそれを正しく理解しています。

このフィドルをチェックしてください。

問題が解決しない場合は、外部のdiv's問題が原因である可能性があります。以上のコードを提供してください。

更新後:

私は今それを手に入れました、チーズと言ってください.. :)

実際、あなたのコードの1つは次のように言っています：

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

このコードは、これより前または後に行うすべてのパディングを制御します。あなたがこのコードを試している間：

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

ブロックに渡そうとしpaddingますが、 onによってオーバーライドされますpadding:link

padding: .5em 0;から行を削除し.big_bottonて貼り付けるだけ.big_button:linkです...そしてすごい動作します.. :)

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

これがあなたのフィドルです：http://jsfiddle.net/Tavzd/3/

于 2012-06-08T18:15:15.640 に答える