CODEWITHSUNDEEP
htmlcssdombuttonmargin
Hachi
Hachi

Reputation: 3289

Align buttons without margin

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

Upvotes: 0

Views: 2214

Answers (3)

debal
debal

Reputation: 1017

i would say that you put the button inside a table and change the spacing of the table. Then you can align the button without using margins.

<table cellspacing="30">
  <tr>
    <td>
      <input class="test" style="background-image:url(arrow_up.png)" type="button" value="^">
    </td>
  </tr>
  <tr>
    <td>
      <input class="test" style="background-image:url(arrow_down.png)" type="button" value="v">
      </div>
    </td>
  </tr>
</table>

that would give you vertical alignment

Upvotes: -1

Danil Speransky
Danil Speransky

Reputation: 30453

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)

Upvotes: 3

Sowmya
Sowmya

Reputation: 26969

Remove <br> from your html code which is there after the first input tag.

Remove br and add display:block to test class.

Herer is demo http://jsfiddle.net/8yyrr/

Upvotes: 2

Related Questions