Don P: Automatische Abstände von Inputs und Selects

Beitrag lesen

SELF-Forum

Automatische Abstände von Inputs und Selects

Don P
– Informationen zu den Bewertungsregeln

Hallo,

Als CSS-Anfänger stehe ich immer wieder vor neuen Rätseln:

In einem Div stehen mehrere Input- und Select-Felder nebeneinander, aber immer mit gewissem Abstand, obwohl ich ihnen null margin, kaum border und null padding gebe.

Erst wenn sie margin-right: -0.45em; erhalten, stehen sie nahtlos nebeneinander, aber dafür ragt dann das Feld rechts außen über den Rand des Container-Div hinaus.

Ist das denn normal bzw. was soll das? Das macht z.B. die Berechnung der Div-Breite nicht gerade einfach.

Hier mein Code zur Demo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
  
    <head>  
  
        <title>CSS-Test</title>  
  
        <style type="text/css">[code lang=css]  
  
  
            body {  
  
              background: white;  
              color: black;  
  
              margin: 0;  
              padding: 1em;  
  
              font-size: 100.01%;  
              font-family: verdana, arial, sans-serif;  
  
              }  
  
            div#Area {  
  
              height: 1.7em;  
  
              margin-bottom: 0.5em;  
              border: 1px dashed silver;  
              padding: 0.5em;  
  
              }  
  
              div#Area * input {margin-right: -0.45em;}  /* => Abstand 0 */  
              div#Area * select {margin-right: -0.45em;} /* => Abstand 0 */  
  
              div#Ui {  
  
                float: left;  
  
                padding-bottom: 0.5em;  
                border: 1px dashed red;  
                }  
  
        
~~~</style>  
  
    </head>  
  
    <body>  
  
        <div id="Area">  
  
            <div id="Ui">  
  
                <input id="InpName" type="text" value="Input" maxlength="12">  
                <input id="BtnOpen" type="button" value="\*">  
  
                <select id="SelName"><option>Option</option></select>  
                <input id="BtnClose" type="button" value="x">  
                <input id="BtnClear" type="button" value="xx">  
  
            </div>  
  
        </div>  
  
    </body>  
  
</html>[/code]  
  
Mache ich denn irgend etwas falsch?  
  
Gruß, Don P
Beitrag melden
–
Informationen zu den Bewertungsregeln