Проблема с отступами в <table> -> Форум на Исходниках.Ру

	Наши проекты: Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту

Здравствуйте, Гость ! [18.221.250.212]

Прежде чем задать вопрос, полистайте форум и загляните в FAQ!

Модераторы: Vasya2000, Serafim, fatalist

Новое голосование

Проблема с отступами в <table> , да и вообще, между элементами

HighMan

Сообщ. #1 , 28.11.14, 19:32

Senior Member

Профиль · PM

Рейтинг (т): 13

Здравствуйте, Господа!
Каюсь, я не великий спец в HTML/CSS, да и не мое это. Однако жизнь заставила и нужно добить один проектик.
Собственно, все уже более-менее нормально и работает, но остались маленькие косметические дефекты и вся глубина моего незнания, как это исправить.
Простейшая ситуация:

<HTML>

<HEAD>

</HEAD>

<BODY>

</table>

</BODY>

</HTML>

Мне нужно, что бы pic2.gif была точно под pic1.gif (ширина картинок одинаковая = 700рх) без зазора между ними.
Понимаю, что данная проблема решается стилями, но я не знаю как.
Пытался использовать margin, но мы с ним друг друга не поняли

<style>

body { margin: 0px; }

</style>

<body>

</body>

Подскажите, пожалуйста! :wall:

Serafim

Сообщ. #2 , 29.11.14, 00:32

Moderator

Профиль · PM

Рейтинг (т): 79

body - элемент над которым ты оперируешь в css, margin - внешний отступ. Плюс атрибут width у тейбл не должен содержать единиц измерения (т.е. просто 700, если уж решил атрибутами, которые не рекомендуются, ибо устарели давно, а не стилями).

Рекомендую использовать штуки вроде "reset css", так и гуглится. Оно приводит все стили к единому виду во всех браузерах, учитывая их различия в визуальном оформлении. На подобие вот этого:

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}td{padding:0}

Я позволил себе вольности и добавил туда то, что тебе надо - убрал отступы внутри таблиц.

Добавлено 29.11.14, 00:33

Цитата Serafim @ 29.11.14, 00:32

Я позволил себе вольности и добавил туда то, что тебе надо - убрал отступы внутри таблиц.

table {

border-collapse: collapse;

border-spacing: 0;

}

td {

padding: 0;

}

HighMan

Сообщ. #3 , 29.11.14, 10:38

Senior Member

Профиль · PM

Рейтинг (т): 13

Serafim
Сделал как Вы предложили, но это ничего не дало. Между картинками сохраняется отступ.
Чего-то не хватает...

Дьявол кроется в нюансах. Точнее, в отступах.
Если обе картинки загнать в ячейки как "background", то убрать между ними зазор - не сложно. А если картинка вставлена в ячейку, то победить "зазор" не получается.
Вот что утверждает dragonfly (Opera)

.stab table {

border: 0px;

border-spacing: 0px; //зачеркнуто

padding: 0px;

}

table {

display: table;

border-collapse: separate;

border-spacing: 2px;

border-color: gray;

}

По не понятной причине border-spacing игнорируется и встает значение по умолчанию, т.е. 2px.
Из htmlbook.ru
"Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse. "
Убрал collapse, теперь, как видите separate, однако мой стиль ~~border-spacing: 0px;~~ игнорируется и применяется по умолчанию 2px. Как это победить - не понимаю.

Сообщение отредактировано: HighMan - 29.11.14, 13:08

Serafim

Сообщ. #4 , 29.11.14, 14:51

Moderator

Профиль · PM

Рейтинг (т): 79

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

Добавлено 29.11.14, 14:52

Цитата HighMan @ 29.11.14, 10:38

Если обе картинки загнать в ячейки как "background", то убрать между ними зазор - не сложно

Хорошая идея, почему не сделать именно так?

HighMan

Сообщ. #5 , 29.11.14, 15:06

Senior Member

Профиль · PM

Рейтинг (т): 13

Цитата Serafim @ 29.11.14, 14:51

Опере можно верить, можно не верить. Но проблема-то остается! Ладно бы Dragonfly показывал эти несчастные 2рх, но зазора бы не было. Однако, зазор есть и составляет он 4 пиксела. Как раз 2 * 2рх = 4рх.
Решить данную (частную задачу) можно объявив картинки бакграудами. И частная задача будет решена. Точнее, проблема останется, только обходным путем от нее удастся убежать. Не правильно это. Нужно найти решение и избавится от проблемы.

Serafim

Сообщ. #6 , 29.11.14, 16:18

Moderator

Профиль · PM

Рейтинг (т): 79

о, ну так у img по умолчанию disply: inline-block - это значит, что учитываются все пробелы вокруг. Чтоб избавиться от этого - ей надо принудительно выставить disply: block
http://jsbin.com/wovajiwoma/1/

<!DOCTYPE html>

<html>

<head>

<style>

table {

border-collapse: collapse;

border-spacing: 0;

}

td {

padding: 0;

}

img {

display: block;

}

</style>

</head>

<body>

<table>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</body>

</html>

fatalist

Сообщ. #7 , 29.11.14, 16:21

Moderator

Профиль · PM

Поощрения: 20 Dgm

Рейтинг (т): 327

Отступ снизу от вставленной картинки в ячейку я тоже так и не поборол ни в одном из браузеров кроме ослика (с ним особые отношения, он более послушный

)...
Вообще из этого всего я таки вынес один вывод, который нам внушают "с детства": таблицы существуют не для дизайна! Они существуют для данных! Поэтому ячейки видимо не будут нас слушаться в плане уничтожения отступов и т.п. и неоходимо использовать более подходящие контейнеры, как например дивы 8-)

Добавлено 29.11.14, 16:22
Serafim, я вообще многое перепробовал, чтобы избавить от всяких таких вещей, не помогает...

Добавлено 29.11.14, 16:23
Если что, у меня просто иконка, ровно 42х42 и хотелось иметь высоту строки ровно 42, поэтому, а не потому, что я расставляю картинки по странице таблицами

Serafim	Сообщ. #8 , 29.11.14, 16:25
Moderator Профиль · PM Рейтинг (т): 79	Цитата fatalist @ 29.11.14, 16:21 Serafim, я вообще многое перепробовал, чтобы избавить от всяких таких вещей, не помогает... пример по ссылке Цитата Serafim @ 29.11.14, 16:18 http://jsbin.com/wovajiwoma/1/ Добавлено 29.11.14, 16:26

HighMan

Сообщ. #9 , 29.11.14, 20:21

Senior Member

Профиль · PM

Рейтинг (т): 13

<html>

<head>

</head>

<body>

</table>

</body>

</html>

Так и хочется сказать "А ларчик просто открывался", ан нет. Одна и та же конструкция может безбожно глючить на одном и том же браузере. Эти несчастные паддинги со спейсингами я переделывал раз 20 и отступ имел место быть, а потом, ВДРУГ, взяло и получилось.
Попробуйте эту конструкцию сами. Картинки одинаковой ширины, высота может отличаться.
Очень интересно увидеть отчеты от попробовавших.
Кстати, на IE8 работает нормально.
Если у всех получится, то тему подвешу как "Вопрос решен".

Сообщение отредактировано: HighMan - 29.11.14, 20:22

Serafim	Сообщ. #10 , 29.11.14, 20:52
Moderator Профиль · PM Рейтинг (т): 79	эээ, какую конструкцию?

zera	Сообщ. #11 , 29.11.14, 21:15
Master Профиль · PM Поощрения: 7 Dgm Рейтинг (т): 170	печально

DIS	Сообщ. #12 , 30.11.14, 10:48
Senior Member Профиль · PM Рейтинг (т): 28	Ну у меня на файрфоксе и ИЕ последний пример без отступов отображается. А вообще, пробовали через css параметры padding и margin для всех обьектов обнулить? Ну и еще до кучи border-spacing для всей таблицы.

HighMan

Сообщ. #13 , 30.11.14, 12:06

Senior Member

Профиль · PM

Рейтинг (т): 13

Цитата DIS @ 30.11.14, 10:48

Ну у меня на файрфоксе и ИЕ последний пример без отступов отображается.А вообще, пробовали через css параметры padding и margin для всех обьектов обнулить? Ну и еще до кучи border-spacing для всей таблицы.

Я пробовал через css. Не получилось. Тут, скорее всего, вина в крайне поверхностном знакомстве с css.
Вообще, я сисадмин и программер. Взялся не за свое дело. Всегда недолюбливал эти веб дизайны. Теперь удостоверился, что не напрасно :angry:

.
Больше всего понравилась подача информации в разных справочниках. В одном месте о border-spacing просто описание. В другом упоминается, что этот стиль игнорируется при border-collapse:collapse. В третьем.. В третьем упоминается о border-collapse и сноской, что IE этот стиль, вообще, не поддерживает...
Языки высокого уровня - ЗЛО! Зло и раз...тво! HTML это не язык программирования, но квинсистенция этого самого раз...ства.

zera

Сообщ. #14 , 30.11.14, 13:55

Master

Профиль · PM

Поощрения: 7 Dgm

Рейтинг (т): 170

полностью поддерживаю товарища сисадмина и программера. я бы вообще запретил их нафиг, только светлые машинные коды и перфокарты. а лучше вообще изба, печка и водка
ps интересно, по идее с завтрашнего дня зима, пациенты схлынут. даже как-то жалко

1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)

0 пользователей:

[ Script execution time: 0,0387 ] [ 14 queries used ] [ Generated: 20.05.24, 17:46 GMT ]