Remove space between span and input

Asked

Viewed 1,913 times

5

I want to know how I can remove these spaces: inserir a descrição da imagem aqui

So that the spanand the inputstay together, like here: inserir a descrição da imagem aqui

My CSS:

input, textarea { 
background: none repeat scroll 0 0 #FFFFFF; 
border: 1px solid #C9C9C9; 

color: #545658; 
padding: 8px; 
font-size: 14px; 
border-radius: 2px 2px 2px 2px; 

}
 .input-group-addon {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #EEEEEE;
  }

MY HTML: 

<div class="input-group1">
    <span class="input-group-addon" id="basic-addon1">Nome</span>
    <input type="text" name="name" class="input_name" />

    <span class="input-group-addon" id="basic-addon1">Email</span>
    <input type="text" name="email" class="input_email" />
</div>
<div class="input-group1">
    <span class="input-group-addon" id="basic-addon1">Empresa</span>
    <input type="text" name="empresa" class="input_empresa" />
    <select name="state" class="btn" data-width="76" data-value="Funcionários">
        <option value="">Funcionários</option>
        <option value="">------</option>
    </select>
            </div>

    <div class="input-group1">
        <span class="input-group-addon" id="basic-addon1">Cidade</span>
        <input type="text" name="cidade" class="input_cidade" />

    <input type="hidden" name="form_input" value="FORM_COTACAO" />
                <select name="state" class="btn" data-width="76" data-value="UF*">
                    <option value="">UF</option>
                    <option value="AC">AC</option>
                    <option value="AL">AL</option>
                    <option value="AP">AP</option>
                    <option value="AM">AM</option>
                    <option value="BA">BA</option>
                    <option value="CE">CE</option>
                    <option value="DF">DF</option>
                    <option value="ES">ES</option>
                    <option value="GO">GO</option>
                    <option value="MA">MA</option>
                    <option value="MT">MT</option>
                    <option value="MS">MS</option>
                    <option value="MG">MG</option>
                    <option value="PA">PA</option>
                    <option value="PB">PB</option>
                    <option value="PR">PR</option>
                    <option value="PE">PE</option>
                    <option value="PI">PI</option>
                    <option value="RJ">RJ</option>
                    <option value="RN">RN</option>
                    <option value="RS">RS</option>
                    <option value="RO">RO</option>
                    <option value="RR">RR</option>
                    <option value="SC">SC</option>
                    <option value="SP">SP</option>
                    <option value="SE">SE</option>
                    <option value="TO">TO</option>
                </select>   
        <span class="input-group-addon" id="basic-addon1">Telefone</span>
        <input type="text" name="telefone" class="input_telefone" />
        <div class="input-group">

</div>  

</div>

I know I could easily make the form using bootstrap, but I was asked not to use it in this project.

html css
  • 1

    Probably your input or span is margin. Try adding margin: 0. In developer tools (both FF and Chrome), in the "Elements" tab there is the option to see a selected element in box format. In this format of boxes, are displayed padding, width, height and margins computed. So you can know exactly which one is causing the space. Personally, I find it more likely that jsea the input.

  • 4

    Shortest path: Remove any space or line breaks between these elements in your HTML. This occurs with elements inline and inline-block.

  • 1

    @Wineusgobboa.deOliveira Thank you for the comment and explanation!

  • 2

    @bfavaretto It worked right! I never imagined it would be this, thank you very much!

  • 1

    @GWER Put the solution he found as answer.

  • 1

    this problem is very annoying... in SO-en you have a question with several interesting solutions: http://stackoverflow.com/questions/1097006/removaing-whitespace-between-html-elements-when-using-line-breaks

Show 1 more comment

2 answers

2


Instead of:

<span class="input-group-addon" id="basic-addon1">Nome</span>
<input type="text" name="name" class="input_name" />

Tag input next to the tag span as follows:

<span class="input-group-addon" id="basic-addon1">Nome</span><input type="text" name="name" class="input_name" />

In doing so, the elements will be side by side without spacing. I suggest applying the tag label among the elements to improve accessibility. From the rest of your code, just do the same procedure.

1

Putting buoyancy, you solve your problem. See this thumb drive.

Obviously, you need to create an extra marking to wrap the blocks and arrange the elements in the way you think best. But that way, the white space disappears.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.