Immer noch Platz nachdem Rand, Padding, Grenze alle Null sind?

Question

Ich habe Rand, Padding und Border auf Null gesetzt, aber es gibt immer noch Platz um meine Leinwände und Divs in Firefox und Chrome. Offensichtlich verstehe ich nicht, wie man Elemente in HTML einpasst, und wäre dankbar für Ratschläge und Hinweise.

Frage zum Abstand

    *
    {
        border: 0px;
        margin: 0px;
        padding: 0px;
    }
    canvas
    {
        width: 150px;
        height: 150px;
    }
    body
    {
        background-color: Lila;
        color: Silber;
    }

    function draw() {
        var canvas = document.getElementById('canvas1');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "rgb(200, 0, 0)";
            ctx.fillRect(0, 0, 150, 150);
        }
        canvas = document.getElementById('canvas2');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "rgb(0, 200, 0)";
            ctx.fillRect(0, 0, 150, 150);
        }
    }

    Ersatzinhalt 1.

    Ersatzinhalt 2.

Answer 1

Es ist der Leerraum (in diesem Fall ein Zeilenumbruch) zwischen Ihren beiden:

..

Wenn Sie es wie folgt ändern, wird die Lücke verschwinden:

``

Alternativ können Sie Ihren Leerraum beibehalten und `float: left` zu `canvas` in Ihrem CSS hinzufügen. Wenn Sie sich dafür entscheiden, sie zu `float`, möchten Sie wahrscheinlich auch `#allYourControls { clear: both }` hinzufügen, um Ihre Floats zu [löschen](http://www.quirksmode.org/css/clearing.html).

`` ```

Answer 2

• Das Canvas-Element hat standardmäßig eine Anzeige von inline.
• HTML wandelt alle mehrfachen Leerzeichen zu einem einzigen Leerzeichen um.

Diese beiden Eigenschaften kombinieren sich in Ihrem Fall (und vielen anderen), um eine kleine Lücke zwischen Ihren Elementen zu erzeugen. Sie haben einen Zeilenumbruch zwischen Ihren Leinwänden:

Der Browser denkt, dass Sie einfach versuchen, eine Menge Leerzeichen zwischen zwei Inline-Elementen einzufügen. Er denkt, Sie versuchen etwas wie dies zu tun:

Am besten für den Menschen wäre es,
niemals zu existieren, am zweitbesten
wäre es, bald zu sterben.

Also "kollabiert" er diese Zeilenumbrüche zu einem einzelnen Leerzeichen. Aus dem gleichen Grund wird der obige Absatz größtenteils als einzelne, normale Textzeile angezeigt.

tl;dr Platzieren Sie Ihre Leinwände in derselben Zeile.

Wie von @thirtydot vorgeschlagen, so wird die Lücke beseitigt:

    ...

    ...

Answer 3

Wenn ich dich richtig verstehe, ist dies ein wirklich gutes Beispiel dafür, wie unerwünschte Leerzeichen in die Darstellung gelangen. Du hast:

    Ersatzinhalt 1.

    Ersatzinhalt 2. 

Die Zeilenumbrüche im HTML-Quelltext erscheinen als horizontaler Platz auf der gerenderten Seite. Wenn du es so änderst, dass es etwa so aussieht:

Ersatz 
                         Inhalt 
                         1.Ersatzinhalt 2.

dann sollte nirgendwo überflüssiger horizontaler Platz vorhanden sein. Der Trick, um horizontalen Platz zu eliminieren - um den Effekt zu erzielen, den du möchtest - besteht darin, nachfolgende Elemente direkt an die ">" Zeichen anzulehnen.

Answer 4

Kein Element schweben lassen. Fügen Sie einfach die CSS-Regel display: block; zum Canvas-Element hinzu.

Answer 5

Ich hatte auch dieses Problem und habe es mit gelöst:

`

Es ist schon lange her, aber ich hoffe, dass dies für eine andere Person hilfreich sein wird.

`