Home/ Questions/Q 8456065
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T12:27:03+00:00

I want to align two image-buttons with defined size vertically without any space(margin) between

  • 0

I want to align two image-buttons with defined size vertically without any space(margin) between them

I tried to set the margin to 0 but the space remains

<html>  
  <head>
    <title>Test</title>

    <style>
      .test {
        width:0.8em;
        height:0.5em;
        margin:0px;
        border:1px solid black;
        background-repeat:no-repeat;
        background-position:center;
        visibility:visible;
      }
    </style>
  </head>

  <body>
    <form>
      <div style="border:1px solid black; display:inline-block;">
        <input class="test" style="background-image:url(arrow_up.png)" type="button" value="^">
        <br>
        <input class="test" style="background-image:url(arrow_down.png)" type="button" value="v">
      </div>
    </form>
  </body>
</html>

it looks like this but should look like this

    +-+              +-+
    |^|              |^|  
    | |      =>      |v|
    |v|              +-+
    | |
    +-+

do you have any idea, which attribute I need to set, to get rid of the margin?

EDIT (answer):
okay so the combination of display:block; and removing the <br> does what I want thanks to everyone

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try to make them (inputs) block elements, in default they are inline elements and may provide some spaces.

    Demo: http://jsfiddle.net/2YNTk/1/ , http://jsfiddle.net/2YNTk/2/ (with br tag)

    • 0