CSS - откуда пробелы? / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS - откуда пробелы?

15 сообщений из 15, страница 1 из 1

CSS - откуда пробелы?

#38184830

MaximuS_G

Участник

Сообщения: 1 178

Рейтинг: 0 / 0

Всем еще раз привет!
Есть такая конструкция:

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

div.scale {
    font-size: 1em;
}

div.marks div {
    margin: 0px;
    padding: 0px;
    display: inline-block;
}

div.ordinary {
    width: 0.7em;
    height: 0.7em;
    background: rgb(240,240,240);
}

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

<div class="scale">
	<div>
		<p></p>
	</div>
	<div class="marks">
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
	</div>
</div>

Я не могу понять, откуда между этими квадратиками появился пробел :). Chrome показывает, что padding/margin равен нулю.
Заранее спасибо за подсказку!

...

Рейтинг:

0 / 0

14.03.2013, 23:40

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38184875

MaximuS_G

Участник

Сообщения: 1 178

Рейтинг: 0 / 0

И второй вопрос по этому элементу появился:
Как лучше всего реализовать логику выравнивания по высоте для всех DIV'ов внутри <div class="marks">?
Нужно так же учесть, что часть из внутренних DIV'ов могут быть увеличены по высоте.
У меня есть 2 варианта:

Делаю всем элементам выравнивание по вертикали таким образом:

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.

div.marks {
    position: relative;
}

div.ordinary {
    position: absolute;
    top: 50%;
    margin: 0em 0em 0em -0.2em;
}

На этом шаге они все собрались слева прижатые к левой границе. Дальше я создаю 10 правил для каждого элемента, и в каждом правиле с определенным шагом увеличиваю отступ слева с помощью атрибута 'left'.

Второй вариант заключается в том, что бы использовать 'display:table' у <div class="marks">. Дальше каждый элемент отображаю в отдельной ячейке и выравниваю по вертикали с помощью 'vertical-align:middle'. Но я не знаю, как тут с margin и padding будет дело обстоять.

Что выбрать? Есть более правильный вариант?
Заранее спасибо!

...

Рейтинг:

0 / 0

15.03.2013, 00:54

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38184907

FireLion

Гость

MaximuS_G,

отступы создают символы из контейнера
решить красиво можно так:
задаешь диву со шкалой размер шрифта 0
div.scale {
font-size: 0;
}
а т.к. он наследуется потомками, то возвращаешь размер шрифта в классе marks
div.marks div {
font-size: 14px;
margin: 0px;
padding: 0px;
display: inline-block;
}

Теперь, если добавишь границу к кубикам, то пробелов не увидишь.
кстати такая ерунда не для всех браузеров нужна, но для кроссбраузерности - вариант решения)

...

Рейтинг:

0 / 0

15.03.2013, 02:41

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38184909

IDVsbruck

Участник

Откуда: Украина

Сообщения: 4 289

Рейтинг: 0 / 0

Угу. Согласен, самый простой. Как вариант - float:left, но зачастую он неуместен. Помню, что было третье решение, но навскидку не приходит.

...

Рейтинг:

0 / 0

15.03.2013, 02:45

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38184914

FireLion

Гость

кстати, если адаптировать под старые версии браузеров и некоторые веб-устройства, то можно еще в родителе добавить:

line-height:0; чтоб убрать в некоторых версиях отступ сверху
letter-spacing:-1px; чтоб заставить все-таки некоторые устройства не делать отступ

а потомку вернуть оба свойства на normal

...

Рейтинг:

0 / 0

15.03.2013, 03:04

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38184937

FireLion

Гость

MaximuS_GИ второй вопрос по этому элементу появился:
Как лучше всего реализовать логику выравнивания по высоте для всех DIV'ов внутри <div class="marks">?
Нужно так же учесть, что часть из внутренних DIV'ов могут быть увеличены по высоте.

У меня есть 2 варианта:

Делаю всем элементам выравнивание по вертикали таким образом:

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.

div.marks {
    position: relative;
}

div.ordinary {
    position: absolute;
    top: 50%;
    margin: 0em 0em 0em -0.2em;
}

Что выбрать? Есть более правильный вариант?
Заранее спасибо!

есть следующее предложение:
т.к. кубики зафиксированы в эмах, то, предполагаю, более крупные кубики тоже будут в эмах, но с большим значением, так?
если так, то калькуляцией можем легко выровнять:
1. все-таки марки оставляем релетив (добавил красную рамочку для лучшей видимости). свойство не наследуется, поэтому "на всякий случай" (вдруг стандартные настройки браузера пользователь поменяет) прописал наследование потомкам
2. создаем еще один вид дивов ordinary_passed с бОльшим размером
3. в атрибуте top меньших дивов ставим результат вычисления = (меньший - больший)/2. В бОльших дивах при необходимости топ обнулить

и вот что из этого получится:

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

div.marks div {
    position: relative;
    font-size: 14px;
    margin: 0;
    padding: 0;
    display: inline-block;
    }

div.ordinary {
    width: 0.7em;
    height: 0.7em;    
    top: -0.4em;
    background: rgb(240,240,240);
}
div.ordinary_passed {
    width: 0.7em;
    height: 1.5em;
    background: rgb(0,250,0);

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

	<div class="marks">
		<div class="ordinary_passed"></div>
		<div class="ordinary_passed"></div>
		<div class="ordinary_passed"></div>
		<div class="ordinary_passed"></div>
		<div class="ordinary_passed"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
	</div>

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

...

Рейтинг:

0 / 0

15.03.2013, 04:57

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38184939

FireLion

Гость

FireLion... прописал наследование потомкам
...

сорри, забыл вставить с наследованием:

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

div.ordinary {
    position: inherit;    
    width: 0.7em;
    height: 0.7em;    
    top: -0.4em;
    background: rgb(240,240,240);
}
div.ordinary_passed {
    position: inherit; 
    width: 0.7em;
    height: 1.5em;
    background: rgb(0,250,0);
}

...

Рейтинг:

0 / 0

15.03.2013, 04:59

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38185008

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

MaximuS_GЯ не могу понять, откуда между этими квадратиками появился пробел :).
Вот откуда.

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
div.scale {
    font-size: 1em;
}
.marks {
	border: 1px solid;
}
div.marks div {
    margin: 0px;
    padding: 0px;
    display: inline-block;
}
div.ordinary {
    width: 0.7em;
    height: 0.7em;
    background: rgb(240,240,240);
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="scale">
	<div>
		<p></p>
	</div>
	<div class="marks">
		<div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div>
	</div>
</div>
</body>
</html>

...

Рейтинг:

0 / 0

15.03.2013, 08:31

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38185009

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

MaximuS_GКак лучше всего реализовать логику выравнивания по высоте
...
Что выбрать? Есть более правильный вариант?
Нужно выбирать таблицу.

...

Рейтинг:

0 / 0

15.03.2013, 08:32

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38185013

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

FireLionотступы создают символы из контейнера
решить красиво можно так:
задаешь диву со шкалой размер шрифта 0

Код: css

1.
2.
3.

div.scale {
    font-size: 0;
}

а т.к. он наследуется потомками, то возвращаешь размер шрифта в классе marks

Код: css

1.
2.
3.
4.
5.
6.

div.marks div {
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    display: inline-block;
}

Теперь, если добавишь границу к кубикам, то пробелов не увидишь.
кстати такая ерунда не для всех браузеров нужна, но для кроссбраузерности - вариант решения)
Как альтернативное решение...

Код: css

1.
2.
3.

.marks {
	word-spacing: -4px;
}

...

Рейтинг:

0 / 0

15.03.2013, 08:39

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38185533

FireLion

Гость

krvsaMaximuS_GЯ не могу понять, откуда между этими квадратиками появился пробел :).
Вот откуда.

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
div.scale {
    font-size: 1em;
}
.marks {
	border: 1px solid;
}
div.marks div {
    margin: 0px;
    padding: 0px;
    display: inline-block;
}
div.ordinary {
    width: 0.7em;
    height: 0.7em;
    background: rgb(240,240,240);
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="scale">
	<div>
		<p></p>
	</div>
	<div class="marks">
		<div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div>
	</div>
</div>
</body>
</html>

действительно причина именно в этом - в расположении вертикальным столбцом. но не очень-то читабельно располагать большое кол-во дивов в строку

...

Рейтинг:

0 / 0

15.03.2013, 13:27

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38185568

MaximuS_G

Участник

Сообщения: 1 178

Рейтинг: 0 / 0

Всем спасибо большое! Особенно FireLion за расширенные комментарии.
FireLionотступы создают символы из контейнера
А где прочитать про это можно? Я вбил в google "символы из контейнера", но что-то не получил нужно информации. Может есть правильнее название? Контейнеры шрифта ? Или объясните, пожалуйста, в топике, как они образуются.
FireLionесть следующее предложение:
т.к. кубики зафиксированы в эмах, то, предполагаю, более крупные кубики тоже будут в эмах, но с большим значением, так?

Да, верно. Я просто буду менять класс тег, и он будет увеличиваться, по отношению к остальным. Во вложении прикрепил, что хочется получить на выходе.
FireLion1. все-таки марки оставляем релетив (добавил красную рамочку для лучшей видимости). свойство не наследуется, поэтому "на всякий случай" (вдруг стандартные настройки браузера пользователь поменяет) прописал наследование потомкам
2. создаем еще один вид дивов ordinary_passed с бОльшим размером
3. в атрибуте top меньших дивов ставим результат вычисления = (меньший - больший)/2. В бОльших дивах при необходимости топ обнулить
Не понял, зачем оставляем relative. Можете объяснить?
Я так понял, вариант, который Вы предлагаете, заключается в том, что бы сделать общую высоту div.marks равную высоте div.ordinary_passed, и не выравнивать их посредине, а div.ordinary уменьшать по высоте (height: 0.7em;) по сравнению с div.marks и выравнивать по средине с помощью (top: -0.4em;)?
krvsaВот откуда.
Спасибо, но к сожалению так и не понял, откуда они появились. Вы можете объяснить свой пример?
krvsaНужно выбирать таблицу.
Спасибо, а какие у них будут преимущества по сравнению с решением FireLion?

...

Рейтинг:

0 / 0

15.03.2013, 13:47

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38185657

FireLion

Гость

MaximuS_GВсем спасибо большое! Особенно FireLion за расширенные комментарии.
FireLionотступы создают символы из контейнера
А где прочитать про это можно? Я вбил в google "символы из контейнера", но что-то не получил нужно информации. Может есть правильнее название? Контейнеры шрифта ? Или объясните, пожалуйста, в топике, как они образуются.

называются "отступы между строчными элементами"

MaximuS_Gкак они образуются.

это особенности интерпретации браузерами отображения строчных элементов, объединенных в линейный блок. Если записать внутренние дивы в ряд, то отступов не будет. а если записать в колонку (как у тебя), то отступы появятся в хроме, но могут не появится в других браузерах. т.е. простейшее избавление от этих отступов - расположить в ряд, но если их много, что очень нечитабельный код получается. поэтому я выбрал вариант с принудительным избавлением от отступа, чтоб во всех браузерах отображалось одинаково.

MaximuS_GНе понял, зачем оставляем relative. Можете объяснить?
именно для явного указания последовательного отображения "один за одним" в нормальном потоке. Это свойство - по умолчанию в браузерах, но некоторые пользователи его меняют, поэтому может все "поломаться"

MaximuS_GЯ так понял, вариант, который Вы предлагаете, заключается в том, что бы сделать общую высоту div.marks равную высоте div.ordinary_passed, и не выравнивать их посредине, а div.ordinary уменьшать по высоте (height: 0.7em;) по сравнению с div.marks и выравнивать по средине с помощью (top: -0.4em;)?
верно. установить общую высоту по высоте максимального блока. а чтоб меньший блок отцентровать по высоте (без таблицы иначе не получится), нужно либо сверху, либо снизу сделать рассчитанный отступ. Я предпочитаю верхний отступ (как распространенная мера борьбы со схлопыванием)

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

...

Рейтинг:

0 / 0

15.03.2013, 14:35

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38186320

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

MaximuS_Gно к сожалению так и не понял, откуда они появились. Вы можете объяснить свой пример?
У тебя строчные элементы разделены <возврат_каретки><перевод_строки>. Получается аналог

Код: html

<p>пример простого текста</p>

или (как в твоём случае)

Код: html

1.
2.
3.
4.
5.

<p>
   пример 
   простого 
   текста
</p>

Т.е. это именно пробелы между "словами"...

MaximuS_Gа какие у них будут преимущества по сравнению с решением FireLion?
Нет никаких танцев с бубнами...

...

Рейтинг:

0 / 0

15.03.2013, 20:50

| Ответить | Цитировать | Написать

CSS - откуда пробелы?

#38186442

MaximuS_G

Участник

Сообщения: 1 178

Рейтинг: 0 / 0

FireLion , krvsa
Спасибо, все понятно кажется! Удачи!)

...

Рейтинг:

0 / 0

16.03.2013, 00:29

| Ответить | Цитировать | Написать

15 сообщений из 15, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS - откуда пробелы?

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&msg=38184909&tid=1448587]:	0ms
get settings:	8ms
get forum list:	12ms
check forum access:	2ms
check topic access:	2ms
track hit:	323ms
get topic data:	6ms
get forum data:	2ms
get page messages:	28ms
get tp. blocked users:	1ms
others:	251ms

total:	635ms

	Необходимые cookie
	Cookie для сбора статистики
	Cookie для маркетинга и рекламы