Помощь в оформлении страницы

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

  •  12-09-2019
  •  | 
  •  

Вопрос

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

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

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

Это было полезно?

Решение

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

    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 в те же размеры или больше.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top