Форум программистов, компьютерный форум, киберфорум

HTML, CSS

Форум программистов и сисадминов Киберфорум

Войти

Регистрация
Восстановить пароль

Сообщество

Заказать работу

Рейтинг 4.56/34:

Рейтинг темы: голосов - 34, средняя оценка - 4.56

Lovi

0 / 0 / 1

Регистрация: 20.05.2013

Сообщений: 20

Расстояние между блоками по вертикали

23.12.2013, 05:39. Показов 7175. Ответов 3

Метки нет (Все метки)

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

Имеются блоки: "ab","cd" и "ef": http://jsfiddle.net/SY4Lm/22/

Задача: задать расстояние между блоками по вертикали.

Условия:
1) height задавать нельзя, так как везде текстовые данные.
2) Прописывать что-то между блоками отдельно, например <br>, нецелесообразно, так как на самом деле блоков гораздо больше, это всего лишь фрагмент большого кода.

Мои не получившиеся решения:
1) С "margin:25px 0;": http://jsfiddle.net/SY4Lm/23/

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div class="str">
        <div class="cell">a<br>a<br>a<br>a</div>
        <div class="cell">b<br>b<br>b<br>b</div>
    </div>
    <div class="str">
        <div class="cell">c<br>c<br>c<br>c</div>
        <div class="cell">d<br>d<br>d<br>d</div>
    </div>
    <div class="str">
        <div class="cell">e<br>e<br>e<br>e</div>
        <div class="cell">f<br>f<br>f<br>f</div>
    </div>
</body>

CSS
1
2
3
4
5
6
7
8
.str {
    width:100px;
    margin:25px 0;
}
.cell {
    width:50px;
    float:left;
}

2) С "padding:25px 0;": http://jsfiddle.net/SY4Lm/24/

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div class="str">
        <div class="cell">a<br>a<br>a<br>a</div>
        <div class="cell">b<br>b<br>b<br>b</div>
    </div>
    <div class="str">
        <div class="cell">c<br>c<br>c<br>c</div>
        <div class="cell">d<br>d<br>d<br>d</div>
    </div>
    <div class="str">
        <div class="cell">e<br>e<br>e<br>e</div>
        <div class="cell">f<br>f<br>f<br>f</div>
    </div>
</body>

CSS
1
2
3
4
5
6
7
8
.str {
    width:100px;
    padding:25px 0;
}
.cell {
    width:50px;
    float:left;
}

3) С "padding:50px 0;": http://jsfiddle.net/SY4Lm/30/ - большой пропуск сверху

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div class="str">
        <div class="cell">a<br>a<br>a<br>a</div>
        <div class="cell">b<br>b<br>b<br>b</div>
    </div>
    <div class="str">
        <div class="cell">c<br>c<br>c<br>c</div>
        <div class="cell">d<br>d<br>d<br>d</div>
    </div>
    <div class="str">
        <div class="cell">e<br>e<br>e<br>e</div>
        <div class="cell">f<br>f<br>f<br>f</div>
    </div>
</body>

CSS
1
2
3
4
5
6
7
8
.str {
    width:100px;
    padding:50px 0;
}
.cell {
    width:50px;
    float:left;
}

4) С "border-width:25px 0;": http://jsfiddle.net/SY4Lm/25/

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div class="str">
        <div class="cell">a<br>a<br>a<br>a</div>
        <div class="cell">b<br>b<br>b<br>b</div>
    </div>
    <div class="str">
        <div class="cell">c<br>c<br>c<br>c</div>
        <div class="cell">d<br>d<br>d<br>d</div>
    </div>
    <div class="str">
        <div class="cell">e<br>e<br>e<br>e</div>
        <div class="cell">f<br>f<br>f<br>f</div>
    </div>
</body>

CSS
1
2
3
4
5
6
7
8
.str {
    width:100px;
    border-width:25px 0;
}
.cell {
    width:50px;
    float:left;
}

5) С "border:solid white; border-width:25px 0;": http://jsfiddle.net/SY4Lm/26/

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div class="str">
        <div class="cell">a<br>a<br>a<br>a</div>
        <div class="cell">b<br>b<br>b<br>b</div>
    </div>
    <div class="str">
        <div class="cell">c<br>c<br>c<br>c</div>
        <div class="cell">d<br>d<br>d<br>d</div>
    </div>
    <div class="str">
        <div class="cell">e<br>e<br>e<br>e</div>
        <div class="cell">f<br>f<br>f<br>f</div>
    </div>
</body>

CSS
1
2
3
4
5
6
7
8
9
.str {
    width:100px;
    border:solid white;
    border-width:25px 0;
}
.cell {
    width:50px;
    float:left;
}

6) С "border:solid white; border-width:50px 0;": http://jsfiddle.net/SY4Lm/27/ - большой пропуск сверху и цвет
границы белый

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div class="str">
        <div class="cell">a<br>a<br>a<br>a</div>
        <div class="cell">b<br>b<br>b<br>b</div>
    </div>
    <div class="str">
        <div class="cell">c<br>c<br>c<br>c</div>
        <div class="cell">d<br>d<br>d<br>d</div>
    </div>
    <div class="str">
        <div class="cell">e<br>e<br>e<br>e</div>
        <div class="cell">f<br>f<br>f<br>f</div>
    </div>
</body>

CSS
1
2
3
4
5
6
7
8
9
.str {
    width:100px;
    border:solid white;
    border-width:50px 0;
}
.cell {
    width:50px;
    float:left;
}

7) С "border:solid white; border-width:30px 0;" и "margin:30px 0;": http://jsfiddle.net/SY4Lm/28/ - большой пропуск сверху и цвет границы белый

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div class="str">
        <div class="cell">a<br>a<br>a<br>a</div>
        <div class="cell">b<br>b<br>b<br>b</div>
    </div>
    <div class="str">
        <div class="cell">c<br>c<br>c<br>c</div>
        <div class="cell">d<br>d<br>d<br>d</div>
    </div>
    <div class="str">
        <div class="cell">e<br>e<br>e<br>e</div>
        <div class="cell">f<br>f<br>f<br>f</div>
    </div>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
.str {
    width:100px;
    border:solid white;
    border-width:30px 0;
    margin:30px 0;
}
.cell {
    width:50px;
    float:left;
}

8) С "border-width:25px 0; border:solid white;" и "padding:25px 0;": http://jsfiddle.net/SY4Lm/29/ - большой пропуск сверху и цвет границы белый

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div class="str">
        <div class="cell">a<br>a<br>a<br>a</div>
        <div class="cell">b<br>b<br>b<br>b</div>
    </div>
    <div class="str">
        <div class="cell">c<br>c<br>c<br>c</div>
        <div class="cell">d<br>d<br>d<br>d</div>
    </div>
    <div class="str">
        <div class="cell">e<br>e<br>e<br>e</div>
        <div class="cell">f<br>f<br>f<br>f</div>
    </div>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
.str {
    width:100px;
    border:solid white;
    border-width:25px 0;
    padding:25px 0;
}
.cell {
    width:50px;
    float:left;
}

Комментарий администратора

Правила форума пункт 5.19

Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.

0

cpp_developer

Эксперт

20123 / 5690 / 1417

Регистрация: 09.04.2010

Сообщений: 22,546

23.12.2013, 05:39

Ответы с готовыми решениями:

Как задать расстояние между блоками по вертикали?
1) Margin только от родительского блока отступает, а мне между соседними надо 2) Padding только внутри блока выравнивает 3) Border...

Разное расстояние между блоками
Почему у меня разное расстояние между блоками?

Как уменьшить расстояние Между блоками?
Добрый вечер. Как начинающий верстальщик,хочу обратиться к умным людям. Помогите убрать расстояние,начиная с 4 блока. <html> ...

3

Доктор Зойдберг

Аватар для Доктор Зойдберг

104 / 88 / 21

Регистрация: 19.05.2012

Сообщений: 458

23.12.2013, 09:00

CSS
1
2
3
4
5
.cell {
    width:50px;
    float:left;
    margin-bottom: 25px;
}

0

Lovi

0 / 0 / 1

Регистрация: 20.05.2013

Сообщений: 20

23.12.2013, 13:12 [ТС]

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

Если использовать "margin:25px 0; overflow:hidden;", то в этом примере получается, но на сайте нет((( Там что-то типа: http://jsfiddle.net/SY4Lm/31/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <div class="str">
        <div class="cell">a<br>a<br>a<br>a</div>
        <div class="cell">b<br>b<br>b<br>b</div>
    </div>
    <div class="info">
        <div class="text">text<br>text<br>text<br>text</div>
        <div class="text">text<br>text<br>text<br>text</div>
    </div>       
    <div class="str">
        <div class="cell">c<br>c<br>c<br>c</div>
        <div class="cell">d<br>d<br>d<br>d</div>
    </div>
    <div class="info">
        <div class="text">text<br>text<br>text<br>text</div>
        <div class="text">text<br>text<br>text<br>text</div>
    </div>
    <div class="str">
        <div class="cell">e<br>e<br>e<br>e</div>
        <div class="cell">f<br>f<br>f<br>f</div>
    </div>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.str {
    width:100px;
}
.cell {
    width:50px;
    float:left;
}
.info {
    width:100px;
}
.text {
    width:50px;
    float:left;
}

и тоже не работает http://jsfiddle.net/SY4Lm/32/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <div class="str">
        <div class="cell">a<br>a<br>a<br>a</div>
        <div class="cell">b<br>b<br>b<br>b</div>
    </div>
    <div class="info">
        <div class="text">text<br>text<br>text<br>text</div>
        <div class="text">text<br>text<br>text<br>text</div>
    </div>       
    <div class="str">
        <div class="cell">c<br>c<br>c<br>c</div>
        <div class="cell">d<br>d<br>d<br>d</div>
    </div>
    <div class="info">
        <div class="text">text<br>text<br>text<br>text</div>
        <div class="text">text<br>text<br>text<br>text</div>
    </div>
    <div class="str">
        <div class="cell">e<br>e<br>e<br>e</div>
        <div class="cell">f<br>f<br>f<br>f</div>
    </div>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.str {
    width:100px;
    overflow: hidden;
    margin:25px 0;
}
.cell {
    width:50px;
    float:left;
}
.info {
    width:100px;
}
.text {
    width:50px;
    float:left;
}

0

Доктор Зойдберг 104 / 88 / 21 Регистрация: 19.05.2012 Сообщений: 458
	23.12.2013, 13:36
	Вы сказали как сделать отступ по вертикали я написал. Если вам нужно отделить эти блоки от других, но их друг от друга не отделять, то либо: Задайте блоку в который они вложены: padding-top: 25px; или padding-bottom: 25px; в зависимости от того, с какой стороны сделать отступ, или оба значения. Если же там ещё куча всего, то можете обернуть эти блоки в 1 блок и уже ему задать margin-bottom или margin-top Может код покажете, или лучше ссылку на ваш сайт. 0

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

raxper

Эксперт

30234 / 6612 / 1498

Регистрация: 28.12.2010

Сообщений: 21,154

23.12.2013, 13:36

Помогаю со студенческими работами здесь

Задать расстояние между div блоками
Всем привет, помогите сделать конструкцию как на картинке. Нужно чтобы между красными блоками всегда было расстояние в 1000px. А сами...

Как сделать расстояние между блоками горизонтально
Простите за глупый вопрос Мне нужно сделать футер Есть первый блок Когда вставляю второй то он оказывается под первым Но мне нужно...

Расстояние между div по вертикали
<!doctype html> <html> <head> <style> .str { width:100px; } .cell { width:50px; float:left;

Расстояние между блоками в Joomla
Ребят, подскажите как убрать расстояние между блоками в шаблоне Joomla? Сижу уже неделю - не могу понять где убрать. Уже все вариациии...

Как изменить расстояние между блоками
Здравствуйте. Не могу найти файл, где меняется (либо вообще убирается) расстояние между блоками. На скриншоте отмечен стрелкой. Если...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

4

Ответ

Создать тему

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

Наверх