CODEWITHSUNDEEP
htmlcss
Thalatta
Thalatta

Reputation: 4578

anchor tag height value won't change

I tried all of the solutions enumerated here:

CSS: anchor will NOT accept height

namely setting the <a> tag to display:block and display:inline-block respectively to no avail.

Anybody have any ideas?

https://jsfiddle.net/ebbnormal/wrtu538f/9/

Here is my HTML:

<div class="search-bar-locations">
   <a href='#' id='center'>
     SEARCH BY PROGRAM
     <i class='fa fa-sort-desc'></i>
   </a> 
  </div>

Here is my CSS:

 .search-bar-locations a{
   overflow:hidden;
   display:inline-block;
 }

.search-bar-locations #center {
  display:inline-block;
  height: 40px;
  width: 200px;
  background: #eab63e;
  padding: 15px;
  color: white;
}

Here is what it is rendering the <a> as 230px X 70px as opposed to 200 x 40

enter image description here

Upvotes: 0

Views: 553

Answers (3)

Akshay
Akshay

Reputation: 1354

Hey you could try this solution, this way u can give height to anchor. :)

http://jsfiddle.net/akshaybhende/6hk4n4b1/

//CODE

<div class="search-bar-locations">
   <a href='#' id='center'>
     SEARCH BY PROGRAM
     <i class='fa fa-sort-desc'></i>
   </a> 
  </div>

//CSS

.search-bar-locations a{
   display:block;
    height: 40px;
    padding: 15px;
    line-height:40px;
    width: 200px;
    background: #eab63e;
    color: white;
    text-align:center;
    text-decoration:none;
 }

Upvotes: 0

tribe84
tribe84

Reputation: 5622

You need to read how the box model works for block elements. Remember that when you add padding, you will be adding the padded amount to the width and height of the box. That is why you are essentially getting 30px difference between what you expect.

http://www.w3schools.com/css/css_boxmodel.asp

There is a way around this, by using the box-sizing propery.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

In your example, you would use: 

  -moz-box-sizing: border-box;
       box-sizing: border-box;

Upvotes: 1

user4765675
user4765675

Reputation:

Wrap your anchor tag outside you <div class="search-bar-locations"> as such:

<a href='#' id='center'>
  <div class="search-bar-locations">
     SEARCH BY PROGRAM
     <i class='fa fa-sort-desc'></i>
  </div>
</a>

Edit: anchor tags take the size of anything inside them. So if you want to format the height of the link, change the height of the div inside it.

Upvotes: 2

Related Questions