Помогите с оформлением страницы

У меня есть следующее изображение в верхней части страницы.

<body>
    <form id="form1" runat="server" >
    <div>
        <div>
            <img src="Images/top.png" width="100%" height="115px" alt="top.png" />
        </div>
    </div>
    </form>
</body>

Проблема в том, что слева, сверху, справа и снизу изображения появляется немного отступов. Я не хочу этого дополнения там. Другими словами, я хочу, чтобы верхняя часть изображения находилась на одном уровне с левым и верхним краями страницы, и чтобы она растягивалась по ширине страницы. Как я могу добиться этого с помощью стиля?

Источник

3 ответа

Решение

Стили по умолчанию в некоторых браузерах дают элементу тела отступы, а некоторые дают ему запас. Вам нужно удалить оба, чтобы изображение вошло в область просмотра во всех браузерах.

    body { margin: 0; border: 0 }
Источник

Вам нужно использовать правила сброса CSS, чтобы сбросить стили браузера, а затем строить оттуда. Я использую http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Источник 
<img style="display: block; padding: 0; margin: 0;" ... />

Однако, если это изображение, которое по сути является украшением некоторого рода (т.е. не "контентом" или связанным с другой страницей), я предпочитаю использовать его в качестве фонового изображения в родительском элементе.

Например

# псевдо-изображение {высота: 100 пикселей; ширина: 200 пикселей; фон: прозрачный URL (путь / к / изображение) прокрутка без повтора вверху слева;}

Конечно, делая это таким образом, вы ограничены отображением изображения в его реальном размере, и вам нужно установить для div те же размеры или больше.

Источник
Другие вопросы по тегам