Wie kann ich vollständig die Margin of area per in HTML / CSS entfernen

StackOverflow https://stackoverflow.com/questions/413573

  •  03-07-2019
  •  | 
  •  

Frage

Ich habe folgende HTML 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style>
    .box
    {
        border:solid black 1px;
        padding:0px;
        margin:0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br />
        <input class="box" style="width:150px;" />
        <input class="box" style="width:150px;" /><br />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
    </form>
</body>
</html>

Die Idee ist, dass die area per Pixel perfekt auf der rechten Seite beenden sollte.

Ich will hinzufügen, schließlich Abstand auf den Zeilen 2 und 3 die Breite vergrößert zu kompensieren, aber für den Moment würde Ich mag diese einfache Probe erhalten zu machen.

So Wie kann ich entfernen Sie die Ränder dieser Textfelder, so dass die align richtig?

War es hilfreich?

Lösung

Sie sind Futter nicht wegen der Leerzeichen zwischen ihnen.

Wenn Sie die Zeilenumbrüche und Tabulatoren alle zwischen den <input> Elementen entfernen sind, würde es zeigen, wie Sie wollen.

Andere Tipps

Ich fand das Hinzufügen float: left; zu .box haben, was Sie wollten. 

.box {
    padding:0px;
    margin:0px;
    float: left;
}

Sprechen Sie über Recht, alle Textfelder zu rechtfertigen?

Wenn ja, das ist kein Spielraum Frage. Das ist setzen Sie einfach die Textfelder in einem Aufnahmeelement. Vielleicht ein und legen Sie den text-align: right; CSS-Stil auf dem div.

Die Grenze ist nicht in der Breite enthält, so dass eine Schachtel mit einer 1px Grenze und eine Breite von 150px tatsächlich breit 152 Pixel sein wird.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top