Блок <div> игнорирует отступ от соседнего блока

@igor191 · Регистрация: 24.08.2014

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

Делая редизайн шаблона на Денвере, столкнулся с проблемой отступа между блоками div, блоки наезжают друг на друга. Функции margin и padding в коде не помогают. Срочно нужна ваша помощь!!!

@killlfun · 24.08.2014, 16:15

igor191, код или ссылку на сайт

@igor191 · 24.08.2014, 16:25 **[ТС]**

HTML код конфликта.

HTML5
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
<aside id="sideLeft">
          <div class="block-title content">
                    <h4><i class="icon-th-list"></i>Матчи</h4>
                </div>
{include file="match_slide.tpl"}
                
        
            <!--Бомбардиры-->
            
            <div class="block-title content">
                    <h4><i class="icon-th-list"></i>Матчи</h4>
                </div>
                  <div class="turnir_table block_top2">
                    <div class="block_bottom2">
                      <div class="block_bottom">
                        <div class="block_innert">
                          <div id="sblocks_kaz">
                              <div class="standing">
                                <table class="standing">
                                    <thead><tr><th></th><th>Игрок</th><th><div style="width: 21px; height: 21px; background: url('/templates/sport/images/soccer_ball_icon.png') no-repeat center center; margin: auto; top: 15%; position: relative;"></div></th></tr></thead>
                                    <tbody>
                                        <tr><td>1</td><td>Роналду</td><td>51</td></tr>
                                        <tr><td>2</td><td>Бензема</td><td>24</td></tr>
                                        <tr><td>3</td><td>Бэйл</td><td>22</td></tr>
                                        <tr><td>4</td><td>Иско</td><td>11</td></tr>
                                        <tr><td>5</td><td>Ди Мария</td><td>11</td></tr>
                                        <tr><td>6</td><td>Мората</td><td>9</td></tr>
                                    </tbody>
                                </table>
                            </div>
                          </div>
                        </div>
                     </div>
                          </div> </div>
                       
              
        </aside> <!-- #sideLeft -->

CSS код

CSS
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
40
41
42
43
44
45
46
47
/* STANDING */
@import url([url]http://fonts.googleapis.com/css?family=PT+Sans&subset=cyrillic,latin);[/url]
 
div.standing { width: 225px; height: 240px 0 0 0 0;margin: auto; overflow: hidden; border: 1px solid #39527A; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-bottom:5px;}
div.standing * { font: 14px 'PT Sans', sans-serif; color: #000; text-align: center; }
table.standing { width: 225px; border-collapse: collapse; }
table.standing > thead { background: #5C7EB3; border-bottom: 1px solid #39527A; }
table.standing > thead > tr > th { font-weight: 700; color: #ebebeb; text-shadow: none; }
table.standing > thead > tr > th:nth-child(2) { text-align: left; padding: 0 0 0 5px; }
table.standing > tbody {}
table.standing > tbody > tr { border-bottom: 1px solid #39527A; border-top: 1px solid #39527A; }
table.standing > tbody > tr.real { background: #CED2D8; }
table.standing > tbody > tr.real > td { height: 30px; line-height: 30px; text-shadow: none; }
table.standing > tbody > tr:last-child { border: 0; }
table.standing > tbody > tr:hover { background: #5C7EB3; text-shadow: 0 1px 0 #39527A; }
table.standing > tbody > tr:hover > td { color: #fff; cursor: default; }
table.standing > tbody > tr > td {}
table.standing > tbody > tr > td:nth-child(1) { padding: 0 0 0 3px; }
table.standing > tbody > tr > td:nth-child(2) { text-align: left; padding: 0 0 0 5px; }
table.standing > thead > tr > th, table.standing > tbody > tr > td { height: 30px; line-height: 30px; margin-bottom:5px;}
 
/* MATCH SLIDE */
div#match_info * { font-family: 'Open Sans', sans-serif;font-weight: 400; font-size: 9px; letter-spacing: 1px;margin-bottom:5px;}
div#match_info { width: 250px; height: 240px; float: right; margin-bottom:50px; background: #ebebeb; background: -moz-linear-gradient(top, #ebebeb 25%, #ffffff 75%); background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#ebebeb), color-stop(75%,#ffffff)); background: -webkit-linear-gradient(top, #ebebeb 25%,#ffffff 75%); background: -o-linear-gradient(top, #ebebeb 25%,#ffffff 75%); background: -ms-linear-gradient(top, #ebebeb 25%,#ffffff 75%); background: linear-gradient(to bottom, #ebebeb 25%,#ffffff 75%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#ffffff',GradientType=0 ); box-shadow: inset 0 0 0 2px #EBEBEB, inset 0 0 1px 1px #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
div#match_info > div.tabs { padding: 100px 0 0 0 0; margin-bottom:5px; text-align: center; text-shadow: none; }
div#match_info > div.tabs > a { width: 120px; height: 35px; margin-bottom:5px; line-height: 20px; background: #EBEBEB; color: #39527A; display: inline-block; font-weight: bold; font-size: 12px; text-decoration: none; text-transform: uppercase; border-bottom: 2px solid #39527A; border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; }
div#match_info > div.tabs > a:hover { background: #39527A; color: #fff; }
div#match_info > div.tabs > a[onclick="match1();"] { background: #5173A8; color: #FFF; }
div#match_info > div.tabs > a[onclick="match2();"] { background: #EBEBEB; color: #5173A8; }
div#match_info > div.content { width: 250px; height: 165px;background-image: none; overflow: hidden; position: relative; }
div#match_info > div.content > div.id1 { padding: 10px; left: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
div#match_info > div.content > div.id2 { padding: 10px; left: 250px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
div#match_info > div.content > div.match { width: 250px; height: 165px; display: inline-block; position: absolute; }
div#match_info > div.content > div.match > img.emblem { width: 60px; background: #fff; padding: 10px; border-radius: 80px; box-shadow: inset 0 0 0 2px #B4B4B4, 0 2px 0 1px #FFF; display: inline-block; }
div#match_info > div.content > div.match > div.teams { width: 240px; height: 120px; margin: 0 0 0 15px; display: inline-block; position: absolute; top: 10%; }
div#match_info > div.content > div.match > div.teams > h1 { width: 90px; height: 30px; line-height: 30px; color: #FFF; background: #5173A8 url('/templates/power-css/images/match_icon.png') no-repeat; text-shadow: 0 2px 0 #39527A; display: inline-block; padding: 0 0 0 30px; border-radius: 5px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
div#match_info > div.content > div.match > div.teams > h1:hover { background-color: #345999; }
div#match_info > div.content > div.match > div.teams > h1:after { width: 24px; height: 24px; content: ""; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: inherit; position: absolute; margin: 3px 0 0 0; right: 40px; border-radius: 5px; }
div#match_info > div.content > div.match > div.teams > div { width: 30px; height: 10px; line-height: 17px; color: #39527A; text-shadow: 0 5px 0 #FFFFFF; display: inline-block; text-align: center; font-size: 14px; font-weight: bold; }
div#match_info > div.content > div.match > div.icons { width: 325px; }
div#match_info > div.content > div.match > div.icons > div.icon1,
div#match_info > div.content > div.match > div.icons > div.icon2,
div#match_info > div.content > div.match > div.icons > div.icon3 { height: 30px; line-height: 30px; color: #39527A; font-weight: 700; text-shadow: 0 1px 0 #FFF; padding: 0 0 0 30px; background: url('/templates/power-css/images/match_icon.png') no-repeat; }
div#match_info > div.content > div.match > div.icons > div.icon1 { background-position: 0 -30px; display: inline-block; }
div#match_info > div.content > div.match > div.icons > div.icon2 { background-position: 0 -60px; display: inline-block; }
div#match_info > div.content > div.match > div.icons > div.icon3 { background-position: 0 -90px; }
div#match_info > div.content > div.match > div.icons > div.icon3 > h1 { height: 30px; line-height: 30px; }

Добавлено через 2 минуты
Код 2-х блоков которые конфликтуют, с остальными вроде проблем нет.

@killlfun · 24.08.2014, 17:17

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

@igor191 · 24.08.2014, 17:56 **[ТС]**

Блок <div> игнорирует отступ от соседнего блока

@igor191 · 24.08.2014, 18:41 **[ТС]**

Как видите, нижний блок растягивается вверх, закрывая таблицу вверху. Отступы margin не помогают.

Добавлено через 43 минуты
РЕШИЛ ПРОБЛЕМУ ИЗМЕНЕНИЕМ ЗНАЧЕНИЯ FLOAT, Спасибо за отклики, тему можно закрыть!

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера 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. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@igor191 0 / 0 / 0 Регистрация: 24.08.2014 Сообщений: 12

	Блок <div> игнорирует отступ от соседнего блока 24.08.2014, 16:10. Показов 3269. Ответов 5 Метки нет (Все метки) Делая редизайн шаблона на Денвере, столкнулся с проблемой отступа между блоками div, блоки наезжают друг на друга. Функции margin и padding в коде не помогают. Срочно нужна ваша помощь!!! 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	24.08.2014, 16:15
	igor191, код или ссылку на сайт 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	24.08.2014, 17:17
	igor191, если честно я не вижу проблемы, заскринь что ли... 0

@igor191 0 / 0 / 0 Регистрация: 24.08.2014 Сообщений: 12
	24.08.2014, 17:56 [ТС]
	0

@igor191 0 / 0 / 0 Регистрация: 24.08.2014 Сообщений: 12
	24.08.2014, 18:41 [ТС]
	Как видите, нижний блок растягивается вверх, закрывая таблицу вверху. Отступы margin не помогают. Добавлено через 43 минуты РЕШИЛ ПРОБЛЕМУ ИЗМЕНЕНИЕМ ЗНАЧЕНИЯ FLOAT, Спасибо за отклики, тему можно закрыть! 0