Why does create a little space under the image?

Question

This code leaves this weirdly shaped border (it's the active link border) when you click the image, like so:

enter image description here

And when we put an orange background on the <a> element we see that there's an orange area underneath the image. So, <a> wraps around the image, but also around an area underneath it.

Why does <a> do that?

most likely you have some padding or something like that, I would help but I cannot reproduce it, there is no such border for me. — MightyPork, Jan 04 '15 at 23:44
I'm using firefox and in firefox it appears when you left-click the link, not when you scroll click it. I tried removing the padding and the margin, but it made no difference. — Gemtastic, Jan 04 '15 at 23:46

score 2 · Answer 1 · edited May 23 '17 at 12:30

2

It's actually not spacing underneath at all. It's because your a tag is collapsed due to the default setting of display:inline. Adding display: inline-block to those as will fix that issue:

FIDDLE

Alohci offers a great explanation on why this happens

UPDATE

The extra spacing is the margin on the img:

.social a {
   display: inline-block;
   background-color: orange;
   padding: 0;
   margin: 0;
   vertical-align: top;
}

.socialBtn{
   height: 2.5em;
   width: 2.5em;
   padding: 0;
   margin: 0;
   vertical-align: inherit;
}

NEW FIDDLE

The spacing answer can be provided here

edited May 23 '17 at 12:30

Community

1
1

answered Jan 04 '15 at 23:45

jmore009

12,863
1
19
34

But now there's a big area around the image. Let's say I want it to only wrap around the image? – Gemtastic Jan 04 '15 at 23:48
[This fiddle](http://jsfiddle.net/we67Lp6o/3/) shows that there's still an area under the image. Where does that one come from? – Gemtastic Jan 04 '15 at 23:54
@Gemtastic just set the `vertical-align` property – jmore009 Jan 05 '15 at 00:00
@Gemtastic I added a new fiddle – jmore009 Jan 05 '15 at 00:01
1

You're adding code that isn't exactly necessary and you're not explaining why. This question is all about why, and so far you've gotten the closest to why though as it indeed has to do with collapsed margins. If you could update your answer to contain a bit more whys instead of "your answer is in another castle" (which is off topic) I would be very happy. – Gemtastic Jan 05 '15 at 00:09
1

Im not sure which code im adding that isn't `exactly necessary` because it's infact correcting the issue. I added a link to my answer which explains the spacing. Don't take this the wrong way but I've see you on this site asking for help and making people explain themselves over and over until you feel satisfied with the answer. This is a site for help but it's not a place for you to ask others to explain every little thing for you. There is plenty of info online to help explain things. I googled simple search terms to find these already written explanations. You can do the same – jmore009 Jan 05 '15 at 00:25
I'm sorry you feel that way about me actually wanting the answer to the behavior behind the code, not just the code that'll magically fixing the problem without explaining why. It's not for my own sake I keep asking questions, but for others seeking help with the same thing. I did google before I asked. – Gemtastic Jan 05 '15 at 01:19
I dont feel anyway. Your original question was answered with an explanation as to why it was happening. The bottom space issue was a separate issue that could have been addressed in another SO question or a simple google search – jmore009 Jan 05 '15 at 01:27
1

@jmore009 This site has 80% of the "online info" and "google content" you find in searches. If everyone said "there's plenty of content out there" SO wouldn't exist. – Madara's Ghost Jan 06 '15 at 09:42
@SecondRikudo exactly....and in this case it's already been answered, there's a reason questions get marked as duplicates. As I stated the original question was answered with an explanation. What I am referring to is a different issue that came up as a result of OPs first question being solved. And this one too already had an answer. – jmore009 Jan 06 '15 at 15:20

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

First, by default element has an 'outline' decoration, to disable it use the following css rule:

a { outline: 0 }

Second, the area is created by another css property you apply on the image itself: 'margin', which is the margin between the image to the elements around it, in this case it affects the element which wraps it, to fix that change the following rules:

.socialBtn { 
    /* Removed margin here so there won't be space around image */
    height: 2.5em;
    width: 2.5em;
} 
a {
    height: 2.5em; /* Gave it width like the image */
    width: 2.5em; /* Gave it height like the image */
    display: inline-block; /* Made it inline-block so it can have width and height */
}

http://jsfiddle.net/we67Lp6o/6/

UPDATE:

Changing source to understand how the display property: block vs inline-block vs inline.

Removed "outline: 0" from a selector, it is a bad practice, read why here.

edited May 23 '17 at 12:19

Community

1
1

answered Jan 04 '15 at 23:55

ilaif

348
2
13

I don't think your link is very useful, but your code is. The outline was never part of the problem, so the `outline: 0` is unnecessary. – Gemtastic Jan 05 '15 at 00:05
@Gemtastic The outline is creating the purple dots you've seen. It is actually stating that a element is in focus, and after further reading [here](http://outlinenone.com/) I understand it's not recommended to mess with the outline, as it ruins the focus. In addition a good css practice is something called "resetting css" which is basically applying css rules to basic elements as a better convention to solve problems like the default margins and paddings that browsers give elements by default. There are many versions of the reset, here is [one](http://meyerweb.com/eric/tools/css/reset/) – ilaif Jan 05 '15 at 00:19
I know exactly what the outline does, and in this case it actually served me a good purpose as it shows me that `` is behaving in a way I do not want. The question revolves entirely around the behavior of ``. – Gemtastic Jan 05 '15 at 00:37

score 1 · Answer 3 · edited Jan 05 '15 at 03:04

inline-blockis the property you need for the <a> elements. For the spacing issues, the margins need to be removed.

The reason for the strangely shaped border, is of the outline property on <a>. It's showing you the area of your link, but due to the display and margin properties it is a different size than your img.

Here is the new CSS:

.header {
    width: 650px;
    height: 150px;
    clear: left;
    margin: 0px auto;
    background-color: #efefef;
    position: relative;
    border-radius: 4em 4em 0 0;
}

.social{
    padding: 1em 2em 0 0;
    display: inline-block;
    position: absolute;
    right: 0;
}

.socialBtn{
    height: 2.5em;
    width: 2.5em;
}

img {
    display: block;
}

a {
    display: inline-block;
    background-color: orange;
}

http://jsfiddle.net/Lg5a0ksg/4/

The border itself is not in question, it's why it's wrapping so weirdly around the image and a space underneath it. — Gemtastic, Jan 05 '15 at 00:11

score 0 · Answer 4 · answered Jan 05 '15 at 00:02

Set your images to display: block (or alternatively, to vertical-align: bottom) to remove the default space at the bottom. (By default, images align to the baseline of any potential text next to them, and they leave that space there even if there's no text beside them.)

Why does create a little space under the image?

4 Answers4