Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove all extra space around a button with an image?

Alright, try as I might, I cannot for the life of me get rid of this tiny little border around my buttons.

Edit: I should mention, in case I didn't make it clear, these are buttons with an image on them, set to flat with the button sized to the image.

Images below:

enter image description here Number one, I can't for the life of me get these borders to GO AWAY. I've checked everything I can think of. They're:

  • flat
  • border 0
  • no margins
  • no padding
  • manually sized to the size of the image (75px)
  • in a table layout where the columns are all:
    • manually sized to the width of the image (75px)
    • borderless

Nothing seems to really "work" to get rid of these. If I size the columns down to be 74px instead of 75px, most of them go away, but a few remain. I've triple and quadruple checked the images, and they don't have anything that I can pick up on that should be causing this... no transparency around the borders, definitely no border that looks like that.

Which leads me to the second problem:

enter image description here

Settings button when dialog is small...

enter image description here Settings button when dialog is stretched out.

Settings button is also in the same table layout panel.

I've checked all the settings on the table layout panel as well.. I can't find any padding or margin or anything settings that suggest this should be happening.

Does anyone have any experience with this? What am I missing..?

like image 426
trycatch Avatar asked May 04 '12 17:05

trycatch


People also ask

How do I remove spaces around a button?

Browsers always add spaces between some elements, including buttons. To remove these, you need to set font-size to zero for their parent container. Then, to restore text size inside buttons, set font-size for them.

How do I get rid of the white space around an image in CSS?

HTML. Line Height Property: The CSS line-height-property can be used to set the height of the line, whose value is set to normal, by default. By setting the height of the container at 0%, the white space can be removed.

How do I get rid of space between text and image in HTML?

To remove the unwanted space between images or similar HTML elements do one of the following: Put all the elements on one line with no spaces between them. Put the closing bracket of the previous element immediately before the next element on the next line. Comment out the end of line marker (carriage return).


1 Answers

Simple solution: using directly a PictureBox as if it was a button. You can change your image on mouse over or mouse click.

like image 116
Alejandro del Río Avatar answered Oct 13 '22 12:10

Alejandro del Río