wrapping block elements with

Question

as i read around the web, it's a valid html5 practice to wrap block elements inside <a> elements. i have a problem though.

my html

<a href="http://google.com" target="_blank">
<div> </div>
</a>

my css

div {
    background:#f00;
    height:100px;
    margin-left:10px;
    width:300px;
}

a {background:blue;}

the link actually works, but i see no blue background and chrome says that my a have no height and width

enter image description here

changing the css of the a to display:inline-block does the trick here, but not in my website.

enter image description here

do you have any suggestion or solution? how come the a element doesn't "follow" its child? thank you!

http://jsfiddle.net/72cYy/82/

If it works on jsFiddle but not on your site I'd guess that you have more CSS that you're not sharing that's causing a conflict. — j08691, Jan 07 '15 at 16:58
it's not working on js fiddle without inline-block and i don't want to add inline-block to my links. i do have more css on my website but it goes down to that simple structure — valerio0999, Jan 07 '15 at 17:00
do you by chance have a padding on your 's? That way you'd still see the blue from the parent. Something like this http://jsfiddle.net/72cYy/82/ — cptnk, Jan 07 '15 at 17:01
possible duplicate of [Why anchor tag does not take height and width of its containing element](http://stackoverflow.com/questions/18585069/why-anchor-tag-does-not-take-height-and-width-of-its-containing-element) — Vucko, Jan 07 '15 at 17:01
@Vucko there's an wrapping an img there. img are inline-block elements, not block elements like in this case — valerio0999, Jan 07 '15 at 17:03
@vlrprbttst you're right - I'm retracting my vote. In FF seems to work thought. — Vucko, Jan 07 '15 at 17:21

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

it depends on what you're looking for, you can set a to display:block if you want it to behave like a block element:

a {
   display: block;
   background:blue
}

EXAMPLE 1

or you could set it to display: inline-block to make it behave like it natrually would:

a {
   display: inline-block;
   background:blue
}

EXAMPLE 2

There is no reason that either of these wouldn't work on your site. Perhaps you have CSS or javascript overwriting it? Both of these methods will fix the collapsed height/width issue. If it is a conflicting CSS issue you could be more specific by adding an id or a class:

a#wrapper{
   display: inline-block;
}

or

a.wrapper{
   display: inline-block;
}

For more information on collapsed elements, you can check out this SO answer

edited May 23 '17 at 11:53

Community

1
1

answered Jan 07 '15 at 16:57

jmore009

12,863
1
19
34

yes i know, i just expended the to follow without having to specify a display behaviour – valerio0999 Jan 07 '15 at 17:01
@vlrprbttst added a link of an SO post that explains this behavior – jmore009 Jan 07 '15 at 17:04

wrapping block elements with

1 Answers1