Removing white space from image on webpage

Question

I'm trying to figure out why my image is in a box. I ran a little script that nulls out all the white space in my image, but when I try to use it on my site, my image has a white box around it.

I tried setting margin and padding to 0, I also tried setting the display to block, but still it persists, I appreciate any help, I'm sure this is simple, but I'm not a front end developer unfortunately (:

<div class="img_style">
  <a href="link" class="btn btn-lg btn-default">
    <img src="imgSrc.png" style="block">
  </a>
</div>

Currently the css is empty, but after trying first comment, it looks like this:

#img_style {
  style="border: none !important";
}

Remove white space from image

Image inside div has extra space below the image

you should show us "your" complete code, this being CSS also. And/or make up a jsfiddle — Funk Forty Niner, Jan 01 '17 at 20:14
that ^ or see the answer given below. If that doesn't solve this, then... well... you'll need to resort to comment #1. — Funk Forty Niner, Jan 01 '17 at 20:17
Currently that css class is empty. Why did you put quotes around "your"? — Spider, Jan 01 '17 at 20:17
because, you left 2 links to other questions, only left some html but no css to support the question. Again; see the answers below; there's a new one now. — Funk Forty Niner, Jan 01 '17 at 20:18
^ and developer console would have told you something about it — Funk Forty Niner, Jan 01 '17 at 20:22
Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Spider, Jan 01 '17 at 22:01

Morteza Negahi · Answer 1 · 2017-01-01T20:24:56.707

2

First remove style="block" in image tag! Its false. Read about class and id, Link this css to your page

First way

.img_style a{
    border: none;
}

Second Way

.img_style a{
    padding: 0;
    border-radius: 0;
}

Third Way

.img_style img{
    margin : -10px -15px;
}

edited Jan 01 '17 at 20:24

answered Jan 01 '17 at 20:18

Morteza Negahi

3,305
8
24
42

Should I have the a{ or img{ in the css? – Spider Jan 01 '17 at 20:27
for select with class names in css you should use [dot]ClassName like .img_style and css codes are in – Morteza Negahi Jan 01 '17 at 20:28
you a tag have a btn class. And btn class have this propertie: padding : 10px 15px; if you set padding to 0 your problem is solved, And you can pull image out with margin .. is not diffrent – Morteza Negahi Jan 01 '17 at 20:31
I found the issue, it's with my styling for the link, thanks for helping! – Spider Jan 01 '17 at 20:39
In the end I didn't use what you added, not sure if I should just delete this question, but I wanted to give you credit, but not sure if your answer is correct – Spider Jan 01 '17 at 20:40

Fabian · Answer 2 · 2017-01-01T20:40:22.043

0

have you tried the border?

style="border: none !important"

Based on in-line styling**

edited Jan 01 '17 at 20:40

answered Jan 01 '17 at 20:11

Fabian

25
8

I tried this, is my syntax incorrect? It's not working #logo { style="border: none !important"; } – Spider Jan 01 '17 at 20:19
I have edited your inline style element this should work, the first comment given was on the assumption you was working in-line not from a CSS file have edited** – Fabian Jan 01 '17 at 20:39

score 0 · Accepted Answer · answered Jan 01 '17 at 20:39

0

I think I found the issue, my link styling was creating the unnecessary space, so I just removed that and it works, I didn't need to add any extra code.

answered Jan 01 '17 at 20:39

Spider

431
7
21

Removing white space from image on webpage

3 Answers3

Linked