Удалить отступ сверху блока

@Iserrr · Регистрация: 12.09.2014

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

Делаю верстку небольшого сайта в веб-программировании начинающий, столкнулся с проблемой, хочу узнать реально ли ее решить, у меня есть блок <div> в котором содержатся 2 других блоки <div> с функциями display:inline-block;, когда эти блоки заполнять текстом, тогда второй блок получает отступ с верху, и я не знаю как его удалить, возможно кто поможет, пример в ниже?

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
<html>
<head>
<title>test</title>
</head>
 
<body>
<style>
#main {
    width: 250px;
    height: 250px;
    background-color: aqua;
}
.div_test {
    border:  1px solid black;
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: yellow;
}
</style>
<div id="main">
  
  <div class="div_test">
    Первый<br />
    Первый<br />
  </div>
  
  <div class="div_test">
    Второй
  </div>
 
</div>
 
</body>
</html>

@baykonurr · 12.09.2014, 21:34

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#main {
    width: 250px;
    height: 250px;
    background-color: aqua;
    float: left;
}
.div_test {
    border:  1px solid black;
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: yellow;
    float: left;
}

@Alexander519151 · 12.09.2014, 21:34

Всем привет.
Готово. Ваш код, изменения с кимментариями (то что добавил)

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
<html>
<head>
<title>test</title>
</head>
 
<body>
<style>
#main {
    width: 250px;
    height: 250px;
    background-color: aqua;
}
.div_test {
    float:left; /*обтекание справа*/
    margin:5px; /*отступы вокруг по 5 px; можете поменять.*/
    border:  1px solid black;
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: yellow;
}
</style>
<div id="main">
  
  <div class="div_test">
    Первый<br />
    Первый<br />
  </div>
  
  <div class="div_test">
    Второй
  </div>
 
</div>
 
</body>
</html>

@baykonurr · 12.09.2014, 21:34

стили в отдельный файл. style.css

@Alexander519151 · 12.09.2014, 21:35

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

#main {
width: 250px;
height: 250px;
background-color: aqua;
float: left;
}

В основном блоке float: left; не нужен.

А стили действительно нужно в отдельный файл.

@baykonurr · 12.09.2014, 21:40

поставте кодировку.

Добавлено через 38 секунд
согласен просто не то скопировал.) 1 раз ошибся с блоком)

Добавлено через 1 минуту
Александр может и ответите на мой пост а то не могу ничего придумать.

Добавлено через 1 минуту
margin: 0px(верх) 5px(право) 5px (низ) 5px (лево) мб так получше. а тоя сомневаюс что ему нужны одинаковиеотступы.

@Alexander519151 · 12.09.2014, 21:43

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

Александр может и ответите на мой пост

Да, канечно, только добавлю ответ к предыдущему вопросу, точнее правильный код
html должен быть такой!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Документ без названия</title>
<link href="/css/Main.css" rel="stylesheet">
</head>
 
<body>
<div id="main">
    <div class="div_test">
        Первый<br>
        Первый<br>
    </div>
    <div class="div_test">
        Второй
    </div>
</div>
</body>
</html>

а в файле Main.css (который лежит в папке css) такой код

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#main {
    width: 250px;
    height: 250px;
    background-color: aqua;
}
.div_test {
    float:left; 
    margin:5px;
    border:  1px solid black;
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

@baykonurr · 12.09.2014, 21:48

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

.div_test {
* * float:left;
* * margin:5px;
* * border: *1px solid black;
* * display: inline-block;
* * width: 100px;
* * height: 100px;
* * background-color: yellow;
}

он хотел чтобы прилип к верху margin-top 0
margin: 0px(верх) 5px(право) 5px (низ) 5px (лево)

Добавлено через 1 минуту

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

лично я предпочитаю <meta charset="utf-8">

@Alexander519151 · 12.09.2014, 21:54

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

Александр может и ответите на мой пост а то не могу ничего придумать.

я так понял, про стили в отдельный файл.
Да, стили только в отдельный файл.
Я думал Вам тоже нужно помочь.

А про отступы абсолютно правильно. Так получше.

Добавлено через 4 минуты

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

лично я предпочитаю <meta charset="utf-8">

Да, с кодировками в последнее время немного не понятное.
Сам пробовал менять на utf-8.
Создаю новую страницу, указываю utf-8 - все работает.
Изменяю на существующей странице на utf-8 - не работает (всякие иероглифы.)
Нет времени разобраться, столкнулся 3 месяца назад.
Может быть потом.

@baykonurr · 12.09.2014, 21:54

)) нет у меня вопрос о скользящем блоке может видели? я в личку отправил

@Iserrr · 13.09.2014, 00:10 **[ТС]**

Всем спасибо за идеи!!!

@zackuz · 13.09.2014, 11:37

И не одного ответа, почему так происходит. Только как победить.

@Alexander519151 · 13.09.2014, 15:02

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

у меня вопрос о скользящем блоке я в личку отправил

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

И не одного ответа, почему так происходит.

Данная тема здесь

@zackuz · 13.09.2014, 15:22

Это далеко не даннач тема. Это происходит из-за смещения baseline dlv'а при вставке в него <br>, потому что он inline-block, а не просто block. :l . Я к тому, что результат достигнут, все довольны, но в следующий раз он опять полезет на форум, когда флотами нельзя.

@Сергей Кротов · 15.09.2014, 00:50

Alexander519151, Спасибо за ответы и за ссылку

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3, Box2D, FreeType и SDL3_ttf из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	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 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

@baykonurr 11 / 11 / 2 Регистрация: 19.02.2013 Сообщений: 104
	12.09.2014, 21:34
	стили в отдельный файл. style.css 1

@baykonurr 11 / 11 / 2 Регистрация: 19.02.2013 Сообщений: 104
	12.09.2014, 21:40
	поставте кодировку. Добавлено через 38 секунд согласен просто не то скопировал.) 1 раз ошибся с блоком) Добавлено через 1 минуту Александр может и ответите на мой пост а то не могу ничего придумать. Добавлено через 1 минуту margin: 0px(верх) 5px(право) 5px (низ) 5px (лево) мб так получше. а тоя сомневаюс что ему нужны одинаковиеотступы. 3

@baykonurr 11 / 11 / 2 Регистрация: 19.02.2013 Сообщений: 104
	12.09.2014, 21:54
	)) нет у меня вопрос о скользящем блоке может видели? я в личку отправил 1

@Iserrr 0 / 0 / 0 Регистрация: 12.09.2014 Сообщений: 3
	13.09.2014, 00:10 [ТС]
	Всем спасибо за идеи!!! 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	13.09.2014, 11:37
	И не одного ответа, почему так происходит. Только как победить. 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	13.09.2014, 15:22
	Это далеко не даннач тема. Это происходит из-за смещения baseline dlv'а при вставке в него <br>, потому что он inline-block, а не просто block. :l . Я к тому, что результат достигнут, все довольны, но в следующий раз он опять полезет на форум, когда флотами нельзя. 0

@Сергей Кротов 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 13
	15.09.2014, 00:50
	Alexander519151, Спасибо за ответы и за ссылку 0