Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is the anchor tag smaller than the child image?

Tags:

html

css

On my site, http://www.redsquiggli.es under the "Contact Me" section, why are my anchor tags smaller (and underneath) the images that they contain?

Shouldn't the anchor be bigger (with it's specified padding) than it's contents?

Also, I've been trying to get those two icons to be vertically centered in the p tag that the anchor is in... auto margining is not working there either. What's the reason for that?

like image 572
hahuang65 Avatar asked Dec 07 '10 09:12

hahuang65


People also ask

How do I increase the size of an anchor tag?

An anchor is an inline element by default so you can't add dimensions to it unless you change its display property.

What is anchor tag very short answer?

Answer: Anchor tag- The HTML code for creating a link to another page or to a particular section within a page. It is also commonly called an "h-ref." For example: -The <a> tag defines a hyperlink, which is used to link from one page to another. Smenevacuundacy and 6 more users found this answer helpful.

What is the purpose of an anchor tag?

The <a> tag (anchor tag) in HTML is used to create a hyperlink on the webpage. This hyperlink is used to link the webpage to other web pages or some section of the same web page. It's either used to provide an absolute reference or a relative reference as its “href” value.

Why anchor tag is most important tag in HTML?

The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most important attribute of the HTML a tag. and which links to destination page or URL.


2 Answers

Make the a tags display:inline-block; and they will surround the images as you expect, and they will be horizontally centered (as they already are) by the text-align: centre; you have set globally.

You can't vertically align an element in css unless you use a table. Although you can make divs behave like tables with some css, but this will not work in IE: link text

Edit 2016:

You can now use flexbox vertically centre an element.

like image 147
davidbuttar Avatar answered Nov 15 '22 03:11

davidbuttar


Because the links (a) are display: inline by default.

like image 22
kapa Avatar answered Nov 15 '22 03:11

kapa