сбросить css (img) - PullRequest
Новая
       15

сбросить css (img)

3 голосов
/ 29 февраля 2012

Я новичок в CSS, поэтому у меня простой вопрос.

вот мой скрипт => 

<!DOCTYPE html>
 <html>
 <head>
 <title>Default</title>
 <meta charset="UTF-8">
 <style type="text/css">
    body,div,html,img
    {
        margin: 0;
        padding: 0;
        border: 0;
    }
  </style>
  </head>
  <body>
      <div>
          <img src="/project/pics/5.jpg" width="240" height="200">
          <img src="/project/pics/10.jpg" width="240" height="200">
          <img src="/project/pics/10.jpg" width="240" height="200">
      </div>
   </body>
 </html>

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

Я догадался, LOL, это действительно очень просто,просто он должен быть записан в одну строку, иначе должен быть объявлен размер шрифта: 0;

Спасибо всем:))

Ответы [ 4 ]

6 голосов
/ 29 февраля 2012

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

Чтобы устранить проблему, либо float: left; на изображениях, либо просто удалите разрывы строк (например, поместите их все в одну строку без пробелов между тегами).
Другое решение - установить font-size: 0; на родительском элементе, а затем font-size: 16px; на самих элементах.

1 голос
/ 29 февраля 2012

Вы можете поставить изображения смежными: 

  <div>
      <img src="/project/pics/5.jpg" width="240" height="200" /><img
           src="/project/pics/10.jpg" width="240" height="200" /><img
           src="/project/pics/10.jpg" width="240" height="200" />
  </div>

Или вы можете сделать что-то (, что я не считаю сбросом CSS ) для обработки:

1 голос
/ 29 февраля 2012

Попробуйте сместить их влево. Смотрите этот пример

1 голос
/ 29 февраля 2012

Для полного сброса CSS используйте это вместо 

*{
    margin: 0;
    padding: 0;
    border: 0;
}

Затем всплывают элементы изображения 

img{
   float: left;
}
...