CODEWITHSUNDEEP
cssanchorcss-position
Cris Stringfellow
Cris Stringfellow

Reputation: 3808

How to position-style anchor element without absolute and without wrapping div?

I have the following HTML :

<div class="top">
        <div class="header title">Some Big Header Goes Here</div>
        <div class="sub-header title">The fancyness enters here.</div>
        <a href="#">A random link</a>
</div>

Styled with the following classes :

.header {
        padding:2%;
}
.sub-header {
        font-size:120%;
        font-style:italic;
}
.title {
        font-size:158%;
        line-height:80%;
}
.top {  
        display:block;
        text-align:center;
        border:1px solid lime;
        padding:1%;
}
.top a {
       /*color:red;*/ /* This works but I don't want this */
       padding:100000px; /* This does not work, nor do smaller values */
       margin:-999999px; /* This does nothing. */
}

How can I style the anchor link to position it with just a little padding and margin, so as to distance it just a little from the two headers above?

Upvotes: 2

Views: 4001

Answers (2)

Ronophobia
Ronophobia

Reputation: 349

An anchor tag does not inherit certain attributes from the parent when an href attribute is specified with it. That is why you need to add display:block to the style of the anchor tag specifically.

Upvotes: 2

Ravi Y
Ravi Y

Reputation: 4376

Add a display: block; to your .top a style and then adjust the margins and paddings accordingly.

top a {
       display: block;
       /*color:red;*/ /* This works but I don't want this */
       padding:10px; 
       margin:20px; 

}

Working fiddle: http://jsfiddle.net/jnz65/

Upvotes: 6

Related Questions