Question

I have an issue and I can’t seem to either find the answer here or solve it myself. The textboxes seem to have by default approx. 10px over and below the actual textbox. I’ve tried setting the margin and the padding to 0 but nothing the space remains.

I want that textbox to be right over the element that is below it, using margin to move it causes it to push the div below it lower so it doesn’t really help. Any idea how I can get rid of that whitespace?

Markup:

<div class="span-8 last">
  <label for="VoicenoteSearch"></label>
  <input name="data[Voicenote][search]" type="text" class="input-text long" style="margin-top:10px;margin-left:-10px" placeholder="Search" id="VoicenoteSearch">
</div>

Relevant CSS:

label {
  display: block;
}

input.input-text {
    border-color: #b9b9b9;
    border-width: 2px;
    position: relative;
    z-index: 2;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 5px;
}

.input-text.long {
  width: 320px;
}

JSFiddle: http://jsfiddle.net/pyQ5T/

Even if I remove all the CSS those spaces are there, it seems it’s part of the textbox by default

Answer 1

Try adding these CSS properties:

padding:0px;
margin:0px;
float: left;