Добавление изображения в CSS, HTML

Question

У меня проблемы с изображениями в таблице. Несмотря на то, что я установил tr width = 95, а изображение также имеет ширину 95, tr будет автоматически иметь ширину 97 (отступ 2 пикселя справа).

Тем не менее, я явно указал style = "padding: 0px".

Пример страницы выглядит следующим образом: http://beta.worcell.com/sony.html

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

Спасибо.

Answer 1

Заполнение не выглядит проблемой, это поля, которые вы установили. В таблице стилей у вас есть

img {
    padding:0px;
    border:0px;
    margin:-2px;
}

"поле: -2px;" Часть - то, что делает ваши изображения 97px, а не 95px. Установите его на «margin: 0px;» и изображения кажутся нормальными. Затем вам также нужно добавить,

menu img {
    margin: -2px;
}

, чтобы выровнять изображения в меню так, как они были у вас.

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

Answer 2

вам нужно начать с хорошего сброса css . это должно позаботиться о проблемах заполнения для вас. Импортируйте сброс CSS в качестве первого стиля CSS на своей странице и перейдите оттуда.

также не используйте

<br/>

, если вы можете помочь. все, что делает br, может быть достигнуто с помощью поля

Answer 3

часть проблемы заключается в следующем: в styles.css (строка 77) у вас есть

tr td {
  border:1px solid #DDDDDD;
  padding:0.6em;
}

Answer 4

Хммммм, 152 предупреждения в HTML-валидаторе, множество незакрытых тегов ....

Для решения конкретной проблемы пробела рядом с изображением вы можете попробовать удалить пробел между тегом и тегом .

Answer 5

Вам необходимо:

styles.css (line 15)
img {
border:0 none;
margin:-2px; <-- remove this
padding:0;
}

styles.css (line 77)
tr td {
border:1px solid #DDDDDD;
padding:0.6em; <-- remove this
}

Answer 6

"padding: 0px" в вашем коде в данном случае относится к ячейке таблицы, а не к тегу изображения.