Лишние отступы в блоках в блоках

@sotnikow96 · Регистрация: 07.10.2015

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

Вот что у меня сейчас:
[cut]
Вот 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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Автоматизированные информационные системы</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="blocks">
<div id="tip1"><div id="tip1_tip">БЛОК</div></div>
<div id="tip2"><div id="tip2_tip">БЛОК</div></div>
<div id="tip2"><div id="tip2_tip">БЛОК</div></div>
<div id="tip2"><div id="tip2_tip">БЛОК</div></div>
<div id="tip4"><div id="tip4_tip">БЛОК</div></div>
<div id="tip2"><div id="tip2_tip">БЛОК</div></div>
<div id="tip3"><div id="tip3_tip">БЛОК</div></div>
<div id="tip2"><div id="tip2_tip">БЛОК</div></div>
<div id="tip2"><div id="tip2_tip">БЛОК</div></div>
<div id="tip2"><div id="tip2_tip">БЛОК</div></div>
<div id="tip2"><div id="tip2_tip">БЛОК</div></div>
 
</div>
</body>
</html>

Вот css:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
BODY, HTML{margin:0;padding:0;border:0;}
body {
    font-family: Helvetica;
}
#blocks {
    width: 480px;
    background-color: gray;
    padding-top:10px;
    padding-left:10px;
    padding-bottom: 10px;
    margin: 0 auto;/*Расположить по центру*/
    margin-top:10%;/*Расположить по центру*/
}
#tip1 {
    height:140px;
    width: 220px;
    background-color:#228B22;
    padding-top: 10px;
    padding-left:10px;
    overflow: hidden;
    display: inline-block;
}
 
#tip1_tip {
    height:130px;
    width: 210px;
    background-color: blue;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    color: white;
    font-size: 16pt;
}
#tip1:hover {
    cursor:pointer;
    background-color: #2E8B57;
}
#tip1:active {
    background-color: #3CB371;
}
 
#tip2 {
    height:140px;
    width: 220px;
    background-color:#1E90FF;
    padding-top: 10px;
    padding-left:10px;
    overflow: hidden;
    display: inline-block;
}
 
#tip2_tip {
    height:130px;
    width: 210px;
    background-color: #4682B4;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    color: white;
    font-size: 16pt;
}
#tip2:hover {
    cursor:pointer;
    background-color: #6495ED;
}
#tip2:active {
    background-color: #3CB371;
}
 
#tip3 {
    height:290px;
    width: 220px;
    background-color:black;
    padding-top: 10px;
    padding-left:10px;
    overflow: hidden;
    display: inline-block;
}
 
#tip3_tip {
    height:280px;
    width: 210px;
    background-color: #4682B4;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    color: white;
    font-size: 16pt;
}
#tip3:hover {
    cursor:pointer;
    background-color: #6495ED;
}
#tip3:active {
    background-color: #3CB371;
}
 
#tip4 {
    height:140px;
    width: 455px;
    background-color:red;
    padding-top: 10px;
    padding-left:10px;
    overflow: hidden;
    display: inline-block;
}
 
#tip4_tip {
    height:130px;
    width: 445px;
    background-color: #4682B4;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    color: white;
    font-size: 16pt;
}
#tip4:hover {
    cursor:pointer;
    background-color: #6495ED;
}
#tip4:active {
    background-color: #3CB371;
}

Как сделать что бы таких пропусков не было? где и что мне стоит удалить или изменить?

@Resume · 03.02.2016, 23:23

Для #tip3, #tip3_tip нужно уменьшить высоту, то есть:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#tip3 {
    height:140px; /* уменьшили высоту*/
    width: 220px;
    background-color:black;
    padding-top: 10px;
    padding-left:10px;
    overflow: hidden;
    display: inline-block;
}
 
#tip3_tip {
    height:130px; /* уменьшили высоту*/
    width: 210px;
    background-color: #4682B4;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    color: white;
    font-size: 16pt;
}

@Satorius · 03.02.2016, 23:43

Если вам адаптивные блоки нужны, вот такие, то как их сделать описано тут.
Можете посмотреть как сделать умные динамические блоки и варианты адаптивных блоков

@sotnikow96 · 04.02.2016, 08:02 **[ТС]**

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

Satorius, спасибо за ответ, если ты посмотришь коды в ссылках которые ты скинул и мой css-код то не найдешь разницы

там все красиво выполнено потому что не видно border'ов и там все блоки одинакового размера

@Resume · 04.02.2016, 10:06

Сообщение от dimaignatuhin

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

Вы просили убрать пропуски, я вам предложил вариант, который убирает их

Если хотите сделать, чтобы все работало под разные экраны, то необходимо задавать ширину блоков в % , а не в px.

@sotnikow96 · 04.02.2016, 16:43 **[ТС]**

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

@Htext · 04.02.2016, 17:22

Кстати, вполне здравое желание. Ну, если не хотите (что я очень одобрил бы) возиться со скриптами, то вариант - это абсолютное позиционирование некоторых блоков. Т.е. назначение им абсолютного (или не абсолютного) позиционирования в зависимости от ширины экрана. Собственно, я свою адаптивную верстку именно так делаю.
Правда, непонятно, что делать, если Вы увеличите размер экрана (по сравнению с рисунком) на 50%. Разве что, опять же, средствами CSS изменить при этом положение одного из нижних блоков, чтобы абсолютно позиционировать его в получившееся пустое место.

@Resume · 04.02.2016, 20:33

dimaignatuhin,
и где интересно мною был удален элемент в скинутом куске кода?

@sotnikow96 · 04.02.2016, 21:13 **[ТС]**

Resume,

HTML5
1
height:140px; /* уменьшили высоту*/

Я хочу себе сделать адаптивные блоки с разными размерами. Я понимаю, что если сделать одинаковые размеры, то будет все отображаться так, как должно. Но я как-то пытаюсь сделать с разными размерами уже 2-ой день(

@Resume · 04.02.2016, 21:22

Вы свою верстку на различных расширениях смотрели?

@jade · 05.02.2016, 01:16

Если ты хочешь именно эти элементы с именно этими размерами разместить без пропусков, то можно это сделать, заменив display: inline-block, на float: left и прописав родителю клеарфикс.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
BODY, HTML{margin:0;padding:0;border:0;}
body {
    font-family: Helvetica;
}
#blocks {
    width: 480px;
    background-color: gray;
    padding-top:10px;
    padding-left:10px;
    padding-bottom: 10px;
    margin: 0 auto;/*Расположить по центру*/
    margin-top:10%;/*Расположить по центру*/
}
#blocks:after {
    content: '';
    clear: both;
    display: table;
}
#tip1 {
    height:140px;
    width: 220px;
    background-color:#228B22;
    padding-top: 10px;
    padding-left:10px;
    overflow: hidden;
    float: left;
}
 
#tip1_tip {
    height:130px;
    width: 210px;
    background-color: blue;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    color: white;
    font-size: 16pt;
}
#tip1:hover {
    cursor:pointer;
    background-color: #2E8B57;
}
#tip1:active {
    background-color: #3CB371;
}
 
#tip2 {
    height:140px;
    width: 220px;
    background-color:#1E90FF;
    padding-top: 10px;
    padding-left:10px;
    overflow: hidden;
    float: left;
}
 
#tip2_tip {
    height:130px;
    width: 210px;
    background-color: #4682B4;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    color: white;
    font-size: 16pt;
}
#tip2:hover {
    cursor:pointer;
    background-color: #6495ED;
}
#tip2:active {
    background-color: #3CB371;
}
 
#tip3 {
    height:290px;
    width: 220px;
    background-color:black;
    padding-top: 10px;
    padding-left:10px;
    overflow: hidden;
    float: left;
}
 
#tip3_tip {
    height:280px;
    width: 210px;
    background-color: #4682B4;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    color: white;
    font-size: 16pt;
}
#tip3:hover {
    cursor:pointer;
    background-color: #6495ED;
}
#tip3:active {
    background-color: #3CB371;
}
 
#tip4 {
    height:140px;
    width: 455px;
    background-color:red;
    padding-top: 10px;
    padding-left:10px;
    overflow: hidden;
    float: left;
}
 
#tip4_tip {
    height:130px;
    width: 445px;
    background-color: #4682B4;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    color: white;
    font-size: 16pt;
}
#tip4:hover {
    cursor:pointer;
    background-color: #6495ED;
}
#tip4:active {
    background-color: #3CB371;
}

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование 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, то после закрытия окошка. . .

@Satorius 14 / 14 / 8 Регистрация: 11.12.2015 Сообщений: 37
	03.02.2016, 23:43
	Если вам адаптивные блоки нужны, вот такие, то как их сделать описано тут. Можете посмотреть как сделать умные динамические блоки и варианты адаптивных блоков 0

@sotnikow96 0 / 0 / 0 Регистрация: 07.10.2015 Сообщений: 78
	04.02.2016, 08:02 [ТС]
	Resume, спасибо за ответ, с чего ты взял что мне надо уменьшить высоту? а может мне именно так хочеться? и я хочу сделать так что бы работало под разными размерами. Satorius, спасибо за ответ, если ты посмотришь коды в ссылках которые ты скинул и мой css-код то не найдешь разницы там все красиво выполнено потому что не видно border'ов и там все блоки одинакового размера 0

@sotnikow96 0 / 0 / 0 Регистрация: 07.10.2015 Сообщений: 78
	04.02.2016, 16:43 [ТС]
	Resume, я не считаю вариантом решения проблемы если приходиться какой-то элемент удалять, по моему мнению так и зарождаются говно-коды 0

@Htext 365 / 124 / 22 Регистрация: 08.01.2015 Сообщений: 1,418 Записей в блоге: 2
	04.02.2016, 17:22
	Кстати, вполне здравое желание. Ну, если не хотите (что я очень одобрил бы) возиться со скриптами, то вариант - это абсолютное позиционирование некоторых блоков. Т.е. назначение им абсолютного (или не абсолютного) позиционирования в зависимости от ширины экрана. Собственно, я свою адаптивную верстку именно так делаю. Правда, непонятно, что делать, если Вы увеличите размер экрана (по сравнению с рисунком) на 50%. Разве что, опять же, средствами CSS изменить при этом положение одного из нижних блоков, чтобы абсолютно позиционировать его в получившееся пустое место. 0

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	04.02.2016, 20:33
	dimaignatuhin, и где интересно мною был удален элемент в скинутом куске кода? 0

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	04.02.2016, 21:22
	Вы свою верстку на различных расширениях смотрели? 0