Search code examples
htmlcsshyperlinkblockpadding

hyperlink not accepting padding property

I have a little issue with my CSS:

  • I have a hyperlink element which does not accept the vertical padding I assign to it.

This is part of my HTML:

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

This is the CSS I'm using:

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

for the record: my [body] has a font-size of 10px, so 2em = 20px and as a result .5em = 10px.

The padding does not work.

Can somebody please help me with this? Thanks in advance.

EDIT: thank you for your replies, here's the rest of my code:

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

and css (sorry if it looks weird, it's generated using 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;
}
/*------------------------------------------------------------*/
Solution

  • Actually I don't understand what is the blocking issue here. If you mean to have 10px padding on both top and bottom, then I get it right.

    check this fiddle.

    If problem persists then it may be due to external div's issue may be there. Please do provide more code than.

    After your Update:

    I got it now, say cheez.. :)

    Actually, one of your code says that:

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

    This code takes control of all the paddings you will earlier or after this. While you are try this code:

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

    It tries to give padding to the block but is overrided by padding on :link

    I just delete the line padding: .5em 0; from .big_botton and paste it on .big_button:link...and wow it works.. :)

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

    Here is your fiddle: http://jsfiddle.net/Tavzd/3/