все еще есть пробел после отступа, отступа, границы все ноль? - PullRequest
Новая
       8

все еще есть пробел после отступа, отступа, границы все ноль?

4 голосов
/ 01 мая 2011

Я установил поля, отступы и границу равными нулю, но вокруг моих холстов и блоков в Firefox и Chrome все еще есть место. Очевидно, я не понимаю, как закрепить элементы в HTML, и буду благодарен за советы и указатели. 

<!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>

Ответы [ 6 ]

15 голосов
/ 01 мая 2011

Это пробел (в данном случае разрыв строки) между вашими двумя <canvas>: 

..
</canvas>
<canvas id="canvas2" ..

Если вы измените его на это, пробел исчезнет

</canvas><canvas id="canvas2"

Кроме того, вы можете оставить свой пробел и добавить float: left к canvas в своем CSS.Если вы решите float их, вы, вероятно, захотите также добавить #allYourControls { clear: both } к очистить ваши поплавки .

8 голосов
/ 01 мая 2011
  • Элемент canvas имеет значение по умолчанию inline.
  • HTML сворачивает все несколько экземпляров пробела в один пробел.

Эти два свойства объединяются в вашем случае (и во многих других), чтобы создать небольшой разрыв между вашими элементами. У вас есть разрыв строки между вашими полотнами: 

<canvas></canvas>
<canvas></canvas>

Браузер считает, что вы просто пытаетесь вставить кучу пробелов между двумя встроенными элементами. Он думает, что вы пытаетесь сделать что-то вроде этого: 

<p>Best of all for man would be
to never exist, second best
would be to die soon.</p>

Таким образом, он «сворачивает» эти разрывы строк в один пробел. По той же причине вышеприведенный абзац, по большей части, будет отображаться в виде одной обычной строки текста.

tl; dr Положите свои полотна на одну линию.

Как подсказывает @thirtydot, это как избавиться от пробела: 

<canvas>
    ...
</canvas><canvas>
    ...
</canvas>
2 голосов
/ 01 мая 2011

Если я вас правильно понял, это действительно хороший пример того, как нежелательные пробелы проникают в рендеринг. У вас есть: 

<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">

Новые строки в исходном тексте HTML отображаются как горизонтальное пространство на отображаемой странице. Если вы измените его на что-то вроде: 

<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">

тогда нигде не должно быть постороннего горизонтального пространства. Хитрость в устранении горизонтального пространства - для достижения желаемого эффекта прижатия - состоит в том, чтобы плотно следить за вещами против> символов.

0 голосов
/ 13 апреля 2016

Используя Adobe Animate (NOT Animate Edge), я создал несколько различных баннерных объявлений, которые по сути были одинаковыми, но с несколько иным обменом сообщениями для A / B-тестирования.Любопытно, что примерно половина рекламных объявлений содержала верхнюю прокладку размером 20px в холщовом контейнере 300x250, а нижние 20px были обрезаны внутри контейнера.HTML был идентичным для рекламы, за исключением обращения к файлу JS и общему изображению PNG, так что меня это действительно озадачило.Я не уверен, «почему», но это то, что я добавил к тегу canvas: 

canvas id="canvas" height="250" width="300" style="display:block; position:fixed; top:0; height:250; width:300px; overflow:hidden;"

Обратите внимание, что ширина и высота объявлены как со свойствами элемента, так и со встроенным CSS, и я установил его наблок, фиксированный, верх.

0 голосов
/ 22 сентября 2014

У меня тоже была эта проблема, и я решил ее с помощью: 

<canvas style="display: block;" ...

Прошло много времени, но надеюсь, что это будет полезно для другого человека.

0 голосов
/ 09 апреля 2013

Не плавай ничего. Просто добавьте правило CSS display: block; к элементу canvas.

...