Проблема с полноэкранным изображением HTML

0

Хорошо, я знаю, что таблица стилей margin: 0 гарантирует, что вокруг моего полноэкранного изображения не будет границы белого фона, которая полностью соответствует экрану без границы. Проблема в том, что я могу применить эту таблицу стилей к тегу body. Но тогда весь текст в теге моего тела полностью смещается влево вместе с изображением, скрывая немного текста. В принципе, я хочу, чтобы стиль margin: 0 применялся только к изображению, а не к тексту. Я пробовал всевозможные вещи, например, применяя этот тег к div и помещая изображение внутри div... и т.д., Но это не сработает. Свойство margin только работает для тега body.

Изображение совы, приведенное ниже, полностью полноэкранное и прекрасно работает, но часть текста ниже его сдвигается на два слева (потому что маржа теперь равна 0) и скрывается.

<html>
<head>
<style>
body     
{
    margin:0; 
}
</STYLE>
</head>
<body>

<div id="test">
<img src="owl.jpg"> 
</div>

THIS TEXT GETS SHIFTED TO THE LEFT HIDING SOME OF IT
</body>
</html>

Пожалуйста помоги!

Ссылка 1

 <html>
 <head>
 <style>
 .test
 {
     margin:0; 
 }
 </style>
 </head>
 <body>
 <div class="test" id="test">
 <img src="owl.jpg">
 </div>
 The image now has a margin around it and is not completely full-screen. Same thing for   this text
 </body>
 </html>
  • 0
    Текст наследует значение поля от body . Просто создайте другой класс CSS #text{ margin: 20px; } или любой другой отступ для текста и оберните текст в этот <div id='text'>
  • 0
    Я попробовал это, но это не сработало. Как я уже сказал, до сих пор стиль margine: 0 работал только для тега body для меня. См. Ссылку № 1
Показать ещё 2 комментария
Теги:

1 ответ

1
Лучший ответ

Если вы хотите что-то рядом с краем окна, вы должны установить маржу в 0. Однако, если вы хотите, чтобы текст сдвинулся назад, вы можете обернуть это в контейнер и отформатировать его.

<html>
    <head>
        <title>by the way title is mandatory</title>
        <style>
body { margin: 0; }
.text { padding-left: 10px; }
        </style>
    </head>
    <body>

        <div id="test"><img src="owl.jpg" /></div>
        <div class="text">
THIS TEXT GETS NOW SHIFTED FROM THE LEFT BY A LITTLE
        </div>

    </body>
</html>

редактировать

Хотя я бы рекомендовал добавить оболочку внутри тега body (помогает структурировать позже), если вы действительно хотите сделать это без нее, вы можете использовать этот стиль:

body { margin: 10px; }
#test { margin-left: -10px; }

Это добавит маржу к телу, так что у всех будет белая "граница" вокруг него, за исключением #test image

Поделиться
  • 0
    Нет ли более простого способа сделать это? Идея состоит в том, что мне нужно только, чтобы изображение не имело полей, а все остальное на странице (элементы div, абзацы, текст, все остальные элементы) было доступно. Следуя этому методу, мне придется дать «тестовый» класс всему остальному, кроме изображения. Есть ли что-то вроде негативного заполнения, которое я могу дать только изображению?
  • 0
    Спасибо, что помогает. Прежде чем я увидел ваше обновление, я попробовал атрибуты div position и выяснилось, что это может переопределить поле. Так что я могу просто переместить разделитель больше влево и больше вверх и увеличить размер изображения, и это также сделает его полностью полноэкранным

Ещё вопросы

Сообщество Overcoder
Наверх
Меню