убрать пробелы между кнопок

@ПАЦАН · Регистрация: 04.01.2010

Студворк — интернет-сервис помощи студентам

здрасти, вобщем проблема такая: у меня идут несколько кнопок в ряд, плотно друг к другу. internet exploirer отображает их правильно, но все остальные браузеры ставят между ними пробел. я пробовал поставить для кнопок margin:0; но ничего не изменилось. оказалось пробел ставится из-за перевода строки в коде html. я не могу написать код всех кнопок в одну строку - она получится длиннее монитора раз в 20. а заменить кнопки на ссылки не могу - там проблем вдвое больше. поэтому вопрос: как убрать этот никому не нужный пробел?

@ixapek · 07.11.2010, 02:55

попробуй вместо кнопок использовать другие элементы (div, table). А лучше скриншот и код покажи. Может получится разобраться.

@ПАЦАН · 07.11.2010, 03:30 **[ТС]**

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

скриншоты и код я выложу.

@ixapek · 07.11.2010, 08:39

Ждемс. Кстати про padding ты зря так. Пиксель - фиксированная величина. Это все равно что швед, американец и русский метр будут разной длины отсчитывать

@Good-bad man · 07.11.2010, 11:47

Это как это в CSS нету вертикального выравнивания?

HTML5
1
2
3
4
5
<style>
table{width:100%;height:100%;}
td{vertical-align:center;text-align:center;}
</style>
<table><tr><td>text</td></tr></table>

@tynuca · 07.11.2010, 11:52

ПАЦАН, для наглядности напиши\выложи код.

@ПАЦАН · 07.11.2010, 14:44 **[ТС]**

Пацан сказал, пацан сделал.

HTML:

HTML5
1
2
3
4
5
<button id='b_Renew' class='button' onclick='Show("Renew")'> ReNew </button>
<button id='b_Addnew' class='button' onclick='Show("Addnew")'> Add New </button>
<button id='b_Select' class='button' onclick='Show("Select")'> Select </button>
<button id='b_Update' class='button' onclick='Show("Update")'> Update </button>
<button id='b_Delete' class='button' onclick='Show("Delete")'> Delete </button>

CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
.button
    {
    color: #727171;
    background: url('images/admin_button1.png');
    font-family: 'Tahoma';
    font-size: 14;
    width:134;
    height:31;
    border:none;
    margin:0;
    }

@ПАЦАН · 07.11.2010, 14:51 **[ТС]**

скриншоты:

@ПАЦАН · 07.11.2010, 15:33 **[ТС]**

с div'ами ничего не получится. я поставил им свойство display:inline, а у инлайн-элементов все браузеры игнорируют свойство width. inline-block и block-inline тоже пробовал, ничего хорошего. тем более теперь кнопки отображаются выще, чем надо во всех браузерах, кроме ie.

Добавлено через 15 минут
пробовал ещё вместо button поставить span, опять те же пробелы.

а на счёт этого: Кстати про padding ты зря так. Пиксель - фиксированная величина. Это все равно что швед, американец и русский метр будут разной длины отсчитывать

скажу вот что: хоть пиксель и фиксированная величина, разные браузеры отсчитывают её с разных точек. например, если стоит border толщиной в 2 пикселя, то одни браузеры отсчитывают его от внешнего края рамки, а другие - от внутреннего. кроме того, некоторые браузеры при установке padding, например, на 10 px прибавляет его к высоте и ширине элемента, а некоторые оставляют длину и ширину как есть. так произошло в моём последнем случае с элементом span: натпись кнопки была в верхнем левом углу, по центру по ширине я её конечно выровнял. чтобы выровнять по высоте, поставил padding: 7 0; ie отобразил правильно, а остальные браузеры увеличили height на 7*2 =14 px. поэтому никакие div, span и прочее не катят, так как в них невозможно задать вертикальное выравнивание. Good-bad man, про вертикальное выравнивание в яцейках таблиц я знаю, но таблицы здесь - не то что надо.

@Good-bad man · 07.11.2010, 15:43

А если так?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.button
        {
        color: #727171;
        background: url('images/admin_button1.png');
        font-family: 'Tahoma';
        font-size: 14px;
        width:134px;
        height:31px;
        border:none;
        margin-left:-2px;
        margin-right:-2px;
        }

@ПАЦАН · 07.11.2010, 16:36 **[ТС]**

тогда ie, который до этого отображал кнопки правильно без лишних пробелов будет отображать кнопки одна поверх другой...

@Good-bad man · 07.11.2010, 16:45

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>.button
        {
        color: #727171;
        background: url('images/admin_button1.png');
        font-family: 'Tahoma';
        font-size: 14px;
        width:134px;
        height:31px;
        border:none;
        margin-left:-2px;
        margin-right:-2px;
        }
</style>
<!--[IF IE]>
<style>
.button
        {
        margin:0px;
        }
</style>
<![ENDIF]-->

@ПАЦАН · 07.11.2010, 17:47 **[ТС]**

это пожалуй будет единственное приемлемое решение!

@tynuca · 07.11.2010, 18:53

Можно сделать через div (добавить float:left; в таблицу стилей), но придется использовать хаки для вертикального выравнивания.
Тут наверное проще сделать таблицей и не мучатся.

@ПАЦАН · 07.11.2010, 19:59 **[ТС]**

я уже сделал всё, теперь во вcех браузерах одинаково. сначала я использовал вариант, предложенный Good-bad man, но потом всё-таки решил установить margin: 0 -2; с помощью javascript, обращась по имени класса. потому-что была ещё в опере проблемка, чтобы её решить всёравно пришлось бы javascript использовать.

23.02.2011, 01:39

вот это настоящий гавнокод. вы че, издиваетесь?
1 прописать для всех размеров единицы измерения.
2. всем инпутам float:left; для пущей надежности display:block;
и помоему там были батоны - заменить на инпуты.
через js, ну вы жжете

@vasvas7775 · 23.02.2011, 05:57

Все дело во float:left; если его поставить в стили, все автоматически прижимается к левому блоку.
вот смотри:

CSS
1
2
3
4
5
6
7
8
9
10
11
.button
        {
        color: #727171;
        background: url('images/admin_button1.png');
        font-family: 'Tahoma';
        font-size: 14;
        width:134;
        height:31;
        border:solid 1px;
        float:left;
        }

HTML5
1
2
3
4
5
<button id='b_Renew' class='button' onclick='Show("Renew")'> ReNew </button>
<button id='b_Addnew' class='button' onclick='Show("Addnew")'> Add New </button>
<button id='b_Select' class='button' onclick='Show("Select")'> Select </button>
<button id='b_Update' class='button' onclick='Show("Update")'> Update </button>
<button id='b_Delete' class='button' onclick='Show("Delete")'> Delete </button>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@ПАЦАН 45 / 45 / 12 Регистрация: 04.01.2010 Сообщений: 223

	убрать пробелы между кнопок 07.11.2010, 00:15. Показов 15317. Ответов 16 Метки нет (Все метки) здрасти, вобщем проблема такая: у меня идут несколько кнопок в ряд, плотно друг к другу. internet exploirer отображает их правильно, но все остальные браузеры ставят между ними пробел. я пробовал поставить для кнопок margin:0; но ничего не изменилось. оказалось пробел ставится из-за перевода строки в коде html. я не могу написать код всех кнопок в одну строку - она получится длиннее монитора раз в 20. а заменить кнопки на ссылки не могу - там проблем вдвое больше. поэтому вопрос: как убрать этот никому не нужный пробел? 0

@ixapek 15 / 14 / 2 Регистрация: 18.05.2010 Сообщений: 118
	07.11.2010, 02:55
	попробуй вместо кнопок использовать другие элементы (div, table). А лучше скриншот и код покажи. Может получится разобраться. 0

@ПАЦАН 45 / 45 / 12 Регистрация: 04.01.2010 Сообщений: 223
	07.11.2010, 03:30 [ТС]
	с другими элементами тоже проблема - натпись должна быть по центру как по горизонтале, так и по вертикале, а в css на сколько я знаю нет вертикальной центровки, во вторых придётся писать ява скрипт функцию, которая будет смещать натпись на кнопке при нажатии на неё и обратно при отжатии. с первым справиться сложнее - если только за счёт подбора padding, которые разные браузеры вычисляют по-разному. скриншоты и код я выложу. 0

@ixapek 15 / 14 / 2 Регистрация: 18.05.2010 Сообщений: 118
	07.11.2010, 08:39
	Ждемс. Кстати про padding ты зря так. Пиксель - фиксированная величина. Это все равно что швед, американец и русский метр будут разной длины отсчитывать 0

@tynuca 10 / 10 / 5 Регистрация: 22.09.2009 Сообщений: 60
	07.11.2010, 11:52
	ПАЦАН, для наглядности напиши\выложи код. 0

@ПАЦАН 45 / 45 / 12 Регистрация: 04.01.2010 Сообщений: 223
	07.11.2010, 14:51 [ТС]
	скриншоты: Миниатюры 0

@ПАЦАН 45 / 45 / 12 Регистрация: 04.01.2010 Сообщений: 223
	07.11.2010, 15:33 [ТС]
	с div'ами ничего не получится. я поставил им свойство display:inline, а у инлайн-элементов все браузеры игнорируют свойство width. inline-block и block-inline тоже пробовал, ничего хорошего. тем более теперь кнопки отображаются выще, чем надо во всех браузерах, кроме ie. Добавлено через 15 минут пробовал ещё вместо button поставить span, опять те же пробелы. а на счёт этого: Кстати про padding ты зря так. Пиксель - фиксированная величина. Это все равно что швед, американец и русский метр будут разной длины отсчитывать скажу вот что: хоть пиксель и фиксированная величина, разные браузеры отсчитывают её с разных точек. например, если стоит border толщиной в 2 пикселя, то одни браузеры отсчитывают его от внешнего края рамки, а другие - от внутреннего. кроме того, некоторые браузеры при установке padding, например, на 10 px прибавляет его к высоте и ширине элемента, а некоторые оставляют длину и ширину как есть. так произошло в моём последнем случае с элементом span: натпись кнопки была в верхнем левом углу, по центру по ширине я её конечно выровнял. чтобы выровнять по высоте, поставил padding: 7 0; ie отобразил правильно, а остальные браузеры увеличили height на 7*2 =14 px. поэтому никакие div, span и прочее не катят, так как в них невозможно задать вертикальное выравнивание. Good-bad man, про вертикальное выравнивание в яцейках таблиц я знаю, но таблицы здесь - не то что надо. 0

@ПАЦАН 45 / 45 / 12 Регистрация: 04.01.2010 Сообщений: 223
	07.11.2010, 16:36 [ТС]
	тогда ie, который до этого отображал кнопки правильно без лишних пробелов будет отображать кнопки одна поверх другой... 0

@ПАЦАН 45 / 45 / 12 Регистрация: 04.01.2010 Сообщений: 223
	07.11.2010, 17:47 [ТС]
	это пожалуй будет единственное приемлемое решение! 0

@tynuca 10 / 10 / 5 Регистрация: 22.09.2009 Сообщений: 60
	07.11.2010, 18:53
	Можно сделать через div (добавить float:left; в таблицу стилей), но придется использовать хаки для вертикального выравнивания. Тут наверное проще сделать таблицей и не мучатся. 1

@ПАЦАН 45 / 45 / 12 Регистрация: 04.01.2010 Сообщений: 223
	07.11.2010, 19:59 [ТС]
	я уже сделал всё, теперь во вcех браузерах одинаково. сначала я использовал вариант, предложенный Good-bad man, но потом всё-таки решил установить margin: 0 -2; с помощью javascript, обращась по имени класса. потому-что была ещё в опере проблемка, чтобы её решить всёравно пришлось бы javascript использовать. 0

diesel_666
	23.02.2011, 01:39
	вот это настоящий гавнокод. вы че, издиваетесь? 1 прописать для всех размеров единицы измерения. 2. всем инпутам float:left; для пущей надежности display:block; и помоему там были батоны - заменить на инпуты. через js, ну вы жжете