3

I'm trying to get rid of the space between the period dates and the guets field, tried everything with border, padding, also tried floating the fields but didn't work.

here is the code

<html>
<head>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>  
<form id="frmContact" action="/confirmacao.html" method="post">
<fieldset>
<legend>Consulta:</legend>
  <p>
    <label class="field" for="usr">Nome:&nbsp;</label>
    <input id="usr" type="text" name="nome" title="Digite seu nome" class="textbox"/>
  </p>


<p>
  <label class="field" for="usr">Period:&nbsp;</label>
  <input type="text" id="dataEntrada" name="dataEntrada" class="textbox-date"/>
    a: 
    <input type="text" id="dataSaida" name="dataSaida" class="textbox-date"/>
</p>


<p>
    <label class="field" for="hospedes">Guests:&nbsp;</label>
    <select class="textbox-option" id="hospedes" name="hospedes"> 
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>  
    </select>
</p> 

<p>
    <label class="field" for="usr">E-mail:&nbsp;</label>
    <input id="email" class="textbox" name="email" title="Seu e-mail para que possamos entrar em contato"/>
</p>
<p>
    <label class="field" for="usr">Detalhes:&nbsp;</label>
    <textarea id="mensagem" name="msg" rows="6" cols="30" title="Detalhes adicionais"></textarea>
</p>
<p>
    <input type="submit" value="  Enviar  "/>
</p>
</fieldset>
</form>
</body>

and this is the css

label.field {
    text-align: right;
    width: 100px;
    float: left;
}

.textbox, .textbox-option{
    float: left;
}

.textbox {
width: 250px;
}

.textbox-date{
width: 75px;
}

fieldset p {
clear: both;
padding: 5px;
}
Davi Trindade
  • 31
  • 1
  • 4

2 Answers2

1

In Firefox Web Developer Tools, I see 16px of margin-bottom:

enter image description here

This is being added by the browser's default stylesheet:

enter image description here

Scenarios like this is why CSS Resets are used. Alternatively, to fix this specific problem, set the margin of your your p elements in your stylesheet.

Greg
  • 16,540
  • 9
  • 51
  • 97
  • As an aside, `div` elements are generally used for this type of thing in [semantic html](http://stackoverflow.com/questions/2226562/what-is-the-difference-between-p-and-div). – Greg Aug 05 '13 at 18:44
0

I guess it because when paragraph has some text in paragraph and then it found new paragraph they will have space between them. Anyway I found one solution that not best solution is modify code below by remove text in paragraph to lable of text.

CSS - add new class for label, add float left to .textbox-date 

<style type="text/css">
label.field {
    text-align: right;
    width: 100px;
    float: left;
}

label.newfield 
    float: left;
}

.textbox, .textbox-option{
    float: left;
}

.textbox {
    width: 250px;
}

.textbox-date{
    width: 75px;
    float: left;
}

fieldset p {
    clear: both;
    padding: 5px;

}
</style>

html - add new lable 

<label class="newfield" for="dataSaida">&nbsp;a:&nbsp;</label>

for 

<input type="text" id="dataSaida" name="dataSaida" class="textbox-date"/>

like this

<html>
<head>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>  
<form id="frmContact" action="/confirmacao.html" method="post">
<fieldset>
    <legend>Consulta:</legend>
    <p>
        <label class="field" for="usr">Nome:&nbsp;</label>
        <input id="usr" type="text" name="nome" title="Digite seu nome" class="textbox"/>
    </p>
    <p>
        <label class="field" for="dataEntrada">Period:&nbsp;</label>
        <input type="text" id="dataEntrada" name="dataEntrada" class="textbox-date"/>
        <label class="newfield" for="dataSaida">&nbsp;a:&nbsp;</label>
        <input type="text" id="dataSaida" name="dataSaida" class="textbox-date"/>
    </p>
    <p>
        <label class="field" for="hospedes">Guests:&nbsp;</label>
        <select class="textbox-option" id="hospedes" name="hospedes"> 
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>  
        </select>
    </p> 
    <p>
        <label class="field" for="usr">E-mail:&nbsp;</label>
        <input id="email" class="textbox" name="email" title="Seu e-mail para que possamos entrar em contato"/>
    </p>
    <p>
        <label class="field" for="usr">Detalhes:&nbsp;</label>
        <textarea id="mensagem" name="msg" rows="6" cols="30" title="Detalhes adicionais"></textarea>
    </p>
    <p>
        <input type="submit" value="  Enviar  "/>
    </p>
</fieldset>
</form>
</body>
cavaliercyber
  • 234
  • 1
  • 7