How do you get rid of the element outline that the a tag inserts, without ruining the child element?
<a href="">
<img alt="picsum" src="https://picsum.photos/200/300">
</a>
Ideally highlighting the anchor tag should yield the full width and height of the child element
display: block should fix this issue:
a,
img {
display: block;
}
<a href="">
<img alt="picsum" src="https://picsum.photos/200/300">
</a>
What's happening is the <a> and img are display: inline by default, which creates extra space underneath them as inline is made to work well with text. It may seem stupid that things are this way but it allows an image to fit in nicely with text like you would do in a word processor.
Related
Problem I've never run into. Searched without resolution but might not know the right search terms to use. So if already answered I beg pardon.
I had this html. (Kinda long so simplified)
<div class="movieabovewrap">
<div class="movieabove">
LINK TEXT
</div>
And I wanted the link to cover all of the movieabove div so I moved the link outside of it as in.....
<div class="movieabovewrap">
<a href="LINK">
<div class="movieabove">
LINK TEXT
</div>
</a>
(it seems to be cutting off the last end div on both)
Anyways when I moved the link outside the div all the sudden I get this vertical whitespace of about 10px above and below the divs which I assume is attached somehow to the a href element. Assuming as I can't get anything to show up when I inspect the elements. Is there someway to remove this vertical whitespace with css? It kinda trashes my design. :( Any help would be mucho appreciated.
Short answer: Using <span> instead of <div> inside <a> should do the trick for you.
Explanation: The a tag renders a text element, if you want it's children to also act as text elements they must have display: inline.
div elements have display: block by default.
span elements have display: inline by default.
Add display: block to the link, either inline or via css:
<div class="movieabovewrap">
<a href="LINK" style="display: inline-block;">
<div class="movieabove">
LINK TEXT
</div>
</a>
</div
or
.movieabovewrap > a {
display: inline-block;
}
This question already has answers here:
Remove white space below image [duplicate]
(9 answers)
Image inside div has extra space below the image
(10 answers)
Closed 5 years ago.
please read the full post before marking this as a duplicate
We're all familiar with the annoying default agent stylesheet from browsers. We're probably also familiar with the annoying anchor and image tags with whitespace underneath it.
So here's my issue:
HTML:
<div>
<a href="#">
<img src="src">
</a>
<a href="#">
<img src="src">
</a>
<a href="#">
<img src="src">
</a>
</div>
I used some social icons for test purposes and it looks like this:
I want the anchor to be a square, so in my CSS I simply say a { display: inline-block; }
But now there's a whitespace underneath the image, so in my CSS I say img { display: block }
Everything with the anchor tag and image tag seems to be fine now, but...
Now there's a whitespace inside the div, without there's any evidence it's either the anchor tag or the image tag.
You might think: "well that's easy. Just say div { font-size: 0 } in your CSS". Well that causes another issue: the div does not measure the height very well. It slices off one pixel on the top:
So if there are any fixes: how would I fix this without ugly fixes like: padding-top: 1px or margin-bottom: ...px
If there are no fixes: that would be weird
Try adding a { float:left } or a { vertical-align: middle }
Flexbox works nice.
div, a {
display: flex;
justify-content: center;
}
a:not(:last-child) {
margin-right: 1em;
}
<div>
<a href="#">
<img src="http://placehold.it/100">
</a>
<a href="#">
<img src="http://placehold.it/100">
</a>
<a href="#">
<img src="http://placehold.it/100">
</a>
</div>
See http://codepen.io/robbielaldrich/pen/ZWJyjO?editors=1100.
HTML:
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img class="img-responsive center-block" src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
The <a> tag seems to be extending to the margin of the <img>, but I can't reduce the margin or the image will no longer be centered.
Thanks for any help you can give!
Why you dont use a div to wrap and halign your image?
see my code
HTML
<div class="text-center">
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
</div>
CSS
img{
display: inline-block
}
EDIT:
Codepen: http://codepen.io/anon/pen/grxjmK
Bootstrap's CSS is sets both center-block and img-responsive to display: block
A block level element becomes like a <div> and will take up the whole width of its container if a width or max-width isn't specified. The anchor is wrapped around the entire image block, including the empty space.
You could override the display: block easy enough and center-align the image as if it were text:
<div class="text-center">
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img class="img-responsive center-block" style="display: inline-block !important;" src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
</div>
But without knowing the context of the layout I can't say if there is a better solution.
According to the HTML5 specification, we can place a div inside an a tag. Does accessibility recommend it as we can't place a block element inside an inline element?
I mean something like it:
<a href="#">
<div class="textpart">
header
</div>
</a>
Are there any accessibility problems with this?
You can not make a block-level element a child of an inline-level element, validators will give you a high-five in the face with a chair.
You can however set an inline element inside of another inline element and then set it to display: block; and it will both validate and work...
<a>first line<span style="display: block;">second line</span>third line</a>
This question already has answers here:
Make a div into a link
(30 answers)
Closed 8 years ago.
I have a div like this <div class="xyz"></div> and all the content in that div is in the css. How do I make that div into a link? I tried wrapping the a tag around it, but that didn't seem to work.
Thanks!!
You need to assign display: block; property to the wrapping anchor. Otherwise it won't wrap correctly.
<a style="display:block" href="http://justinbieber.com">
<div class="xyz">My div contents</div>
</a>
Using
<div class="xyz"></div>
works in browsers, even though it violates current HTML specifications. It is permitted according to HTML5 drafts.
When you say that it does not work, you should explain exactly what you did (including jsfiddle code is a good idea), what you expected, and how the behavior different from your expectations.
It is unclear what you mean by “all the content in that div is in the css”, but I suppose it means that the content is really empty in HTML markup and you have CSS like
.xyz:before { content: "Hello world"; }
The entire block is then clickable, with the content text looking like link text there. Isn’t this what you expected?
Wrapping a <a> around won't work (unless you set the <div> to display:inline-block; or display:block; to the <a>) because the div is s a block-level element and the <a> is not.
<a href="http://www.example.com" style="display:block;">
<div>
content
</div>
</a>
<a href="http://www.example.com">
<div style="display:inline-block;">
content
</div>
</a>
<a href="http://www.example.com">
<span>
content
</span >
</a>
<a href="http://www.example.com">
content
</a>
But maybe you should skip the <div> and choose a <span> instead, or just the plain <a>. And if you really want to make the div clickable, you could attach a javascript redirect with a onclick handler, somethign like:
document.getElementById("myId").setAttribute('onclick', 'location.href = "url"');
but I would recommend against that.
the html:
<a class="xyz">your content</a>
the css:
.xyz{
display: block;
}
This will make the anchor be a block level element like a div.