haben noch Platz nach margin, padding, border alle null?

Habe ich margin, padding und border auf null, doch es ist immer noch Platz um meine Leinwände und divs im Firefox und Chrome. Klar, ich verstehe nicht, wie man gemütlich bis-Elemente in HTML, und wäre dankbar für Tipps & Hinweise.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Spacing Question</title>
<style type="text/css">
    *
    {
        border: 0px;
        margin: 0px;
        padding: 0px;
    }
    canvas
    {
        width: 150px;
        height: 150px;
    }
    body
    {
        background-color: Purple;
        color: Silver;
    }
</style>
<script>
    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);
        }
    }
</script>
</head>
<body onload="draw()">
<canvas id="canvas1" width="150" height="150">
    Fallback content 1.
</canvas>
<canvas id="canvas2" width="150" height="150">
    Fallback content 2. 
</canvas>
<div id="allYourControls">
</div>
</body>
</html>

Leinwand ist kein Gültiger tag in HTML 4.0.
Wo sehen Sie HTML 4.0 in dieser Frage?
doctype.
Woops - hatte gescrollt, sah nur <html>. Mein schlechtes.
Ich fand diese Frage, denn ich hatte ein anderes Problem mit den Raum um sich herum eine Leinwand. Wenn Sie hinzufügen <!doctype html> an der Spitze, und fügen Sie so etwas wie <div style='border:1px solid white'> um Ihre Gemälde, die Sie sehen können Raum darunter, innerhalb des div-Grenze. Um loszuwerden dieser, Satz vertical-align:bottom auf der Leinwand.

InformationsquelleAutor Reb.Cabin | 2011-05-01

15

Es ist das Leerzeichen (in diesem Fall ein Zeilenumbruch) zwischen zwei <canvas>:
```
..
</canvas>
<canvas id="canvas2" ..
```
Wenn Sie es ändern, um dadurch die Lücke gegangen werden:
```
</canvas><canvas id="canvas2"
```
Alternativ können Sie das Leerzeichen, und fügen Sie float: left zu canvas in Ihrem CSS. Wenn Sie float Sie, wollen Sie Sie wahrscheinlich auch hinzufügen #allYourControls { clear: both } zu klar, Ihr schwimmt.

Sieht aus wie ich gebissen durch die HTML / Javascript-beautifier in meine IDE! Es enthält alle tags, die auf Ihren eigenen Linien. Meine Oma riet mir, mich einfach mit Emacs oder notepad. Sie hatte Recht!

InformationsquelleAutor thirtydot
8
- Das canvas-element verfügt über ein display von inline standardmäßig.
- HTML reduziert alle mehrere Instanzen von Leerzeichen in ein einzelnes Leerzeichen.
Diese beiden Eigenschaften kombinieren, in deinem Fall (und viele andere) zu erstellen ein kleiner Spalt zwischen den Elementen. Sie haben einen Zeilenumbruch zwischen Ihre Leinwände:
```
<canvas></canvas>
<canvas></canvas>
```
Browser denkt, du bist nur versuchen, legen Sie eine Reihe von Zwischenräumen zwischen zwei inline-Elemente. Er glaubt, dass Sie versuchen, so etwas zu tun:
```
<p>Best of all for man would be
to never exist, second best
would be to die soon.</p>
```
So ist es "kollabiert" diese Zeilenumbrüche in einem einzigen Raum. Es ist der gleiche Grund, dass die vorstehenden Absatzes, für die meisten Teil, würde angezeigt werden, wie eine normale Textzeile.

tl;dr Setzen Sie Ihre Leinwände auf der gleichen Linie.

Als @thirtydot schon sagt, ist dies, wie, um loszuwerden, die Lücke:
```
<canvas>
    ...
</canvas><canvas>
    ...
</canvas>
```
+1 für die ersten zwei Kugel-Punkte. Ich wirklich hätte Sie in meiner Antwort, Sie sind wichtig, um das problem zu verstehen.
Ich hatte Problem mit canvas-Innenseite absolut positionierten div. Hinzufügen von canvas-innen div per JS (ohne Leerzeichen) verursacht Scrollbalken auf div angezeigt werden. Fix für mich war die änderung der Anzeige zu sperren.

InformationsquelleAutor sdleihssirhc
2

Wenn ich verstehe Sie richtig, das ist ein wirklich gutes Beispiel für eine Möglichkeit, dass unerwünschte Leerzeichen schleichen sich in das rendering. Sie haben:
```
<canvas id="canvas1" width="150" height="150">
    Fallback content 1.
</canvas>
<canvas id="canvas2" width="150" height="150">
    Fallback content 2. 
</canvas>
<div id="allYourControls">
```
Die Zeilenumbrüche im HTML-Quelltext zeigen, wie horizontalen Raum in der gerenderten Seite. Wenn Sie ändern es in etwas wie:
```
<canvas id="canvas1" width="150" 
            height="150">Fallback 
                         content 
                         1.</canvas><canvas id="canvas2"
     width="150" height="150">Fallback content 2.</canvas><div id="allYourControls">
```
dann sollte es keine störenden horizontalen Platz. Der trick, um die Beseitigung der horizontale Raum-zu erreichen, gemütlich-up-Effekt, den Sie wollen-butt folgende Sachen bis dicht gegen > - Zeichen.

InformationsquelleAutor Pete Wilson
0

Nicht schwimmen, nichts.
Nur CSS-Regel hinzufügen display: block; für das canvas-element.

InformationsquelleAutor denicio
0

Ich hatte auch dieses problem und das Problem gelöst mit:
```
<canvas style="display: block;" ...
```
Es ist schon lange her, aber hoffe, dass dies hilfreich sein würde, für eine andere person.

InformationsquelleAutor tolga
0

Verwenden von Adobe Animate (NICHT Animiert Rand), und ich mehrere verschiedene banner-anzeigen, waren im wesentlichen die gleichen, aber mit leicht unterschiedlichen messaging für A/B-Tests. Neugierig über die Hälfte der anzeigen hatte über einen 20px top-Polsterung, die innerhalb des 300-x-250 canvas-container und die unteren 20px war abgeschnitten, innerhalb des Containers. Das HTML war identisch zwischen Werbung, außer für den Aufruf der JS-Datei und gemeinsamen PNG-Bild, so dass wirklich überfragt mich. Ich bin mir nicht sicher "warum", aber das ist, was ich Hinzugefügt, um den canvas-tag:
```
canvas id="canvas" height="250" width="300" style="display:block; position:fixed; top:0; height:250; width:300px; overflow:hidden;"
```
Beachten Sie die Breite und Höhe erklärt werden sowohl mit den Eigenschaften der Elemente und inline-CSS, und ich es blockiert, behoben, top.

Es wird großartig sein, wenn Sie sich auf die Beantwortung und erzählen Ihre persönliche Geschichte weniger. Es lässt den Leser verwirrt. Wenn der Kommentar-Bereich ist nicht zu voll ist, können Sie schreiben, dass die Geschichte dort.

InformationsquelleAutor Warren

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

tl;dr Setzen Sie Ihre Leinwände auf der gleichen Linie.