Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/25: Рейтинг темы: голосов - 25, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 12.09.2014
Сообщений: 3
1

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

12.09.2014, 20:15. Показов 4582. Ответов 14
Метки нет (Все метки)

Делаю верстку небольшого сайта в веб-программировании начинающий, столкнулся с проблемой, хочу узнать реально ли ее решить, у меня есть блок <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>
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Миниатюры
Удалить отступ сверху блока  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
12.09.2014, 20:15
Ответы с готовыми решениями:

Внутри родительского блока сделать отступ дочернего блока сверху автоматически
Здравствуйте, как с помощью css внутри родительского блока сделать отступ дочернего блока сверху...

Отступ сверху из за <ul>
Есть страница. В левой колонке меню по сайту. Когда перехожу на страницу, на которой есть тег ul...

Лишний отступ сверху
Всем привет! Помогите решить проблемку пожалуйста, после выполнения функции .load() в div...

Появляется отступ сверху
Над сайдбаром появляется лишний отступ. #category{ border:1px solid #000; overflow:hidden;...

14
11 / 11 / 2
Регистрация: 19.02.2013
Сообщений: 104
12.09.2014, 21:34 2
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;
}
2
460 / 460 / 6
Регистрация: 08.05.2013
Сообщений: 224
12.09.2014, 21:34 3
Всем привет.
Готово. Ваш код, изменения с кимментариями (то что добавил)
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>
4
11 / 11 / 2
Регистрация: 19.02.2013
Сообщений: 104
12.09.2014, 21:34 4
стили в отдельный файл. style.css
1
460 / 460 / 6
Регистрация: 08.05.2013
Сообщений: 224
12.09.2014, 21:35 5
Цитата Сообщение от baykonurr Посмотреть сообщение
#main {
width: 250px;
height: 250px;
background-color: aqua;
float: left;
}
В основном блоке float: left; не нужен.

А стили действительно нужно в отдельный файл.
4
11 / 11 / 2
Регистрация: 19.02.2013
Сообщений: 104
12.09.2014, 21:40 6
поставте кодировку.

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

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

Добавлено через 1 минуту
margin: 0px(верх) 5px(право) 5px (низ) 5px (лево) мб так получше. а тоя сомневаюс что ему нужны одинаковиеотступы.
3
460 / 460 / 6
Регистрация: 08.05.2013
Сообщений: 224
12.09.2014, 21:43 7
Цитата Сообщение от 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;
}
4
11 / 11 / 2
Регистрация: 19.02.2013
Сообщений: 104
12.09.2014, 21:48 8
Цитата Сообщение от 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="windows-1251">
лично я предпочитаю <meta charset="utf-8">
2
460 / 460 / 6
Регистрация: 08.05.2013
Сообщений: 224
12.09.2014, 21:54 9
Цитата Сообщение от baykonurr Посмотреть сообщение
Александр может и ответите на мой пост а то не могу ничего придумать.
я так понял, про стили в отдельный файл.
Да, стили только в отдельный файл.
Я думал Вам тоже нужно помочь.

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

Добавлено через 4 минуты
Цитата Сообщение от baykonurr Посмотреть сообщение
лично я предпочитаю <meta charset="utf-8">
Да, с кодировками в последнее время немного не понятное.
Сам пробовал менять на utf-8.
Создаю новую страницу, указываю utf-8 - все работает.
Изменяю на существующей странице на utf-8 - не работает (всякие иероглифы.)
Нет времени разобраться, столкнулся 3 месяца назад.
Может быть потом.
4
11 / 11 / 2
Регистрация: 19.02.2013
Сообщений: 104
12.09.2014, 21:54 10
)) нет у меня вопрос о скользящем блоке может видели? я в личку отправил
1
0 / 0 / 0
Регистрация: 12.09.2014
Сообщений: 3
13.09.2014, 00:10  [ТС] 11
Всем спасибо за идеи!!!
0
18 / 18 / 5
Регистрация: 03.09.2014
Сообщений: 66
13.09.2014, 11:37 12
И не одного ответа, почему так происходит. Только как победить.
0
460 / 460 / 6
Регистрация: 08.05.2013
Сообщений: 224
13.09.2014, 15:02 13
Цитата Сообщение от baykonurr Посмотреть сообщение
у меня вопрос о скользящем блоке я в личку отправил
Цитата Сообщение от zackuz Посмотреть сообщение
И не одного ответа, почему так происходит.
Данная тема здесь
3
18 / 18 / 5
Регистрация: 03.09.2014
Сообщений: 66
13.09.2014, 15:22 14
Это далеко не даннач тема. Это происходит из-за смещения baseline dlv'а при вставке в него <br>, потому что он inline-block, а не просто block. :l . Я к тому, что результат достигнут, все довольны, но в следующий раз он опять полезет на форум, когда флотами нельзя.
0
0 / 0 / 0
Регистрация: 13.09.2014
Сообщений: 13
15.09.2014, 00:50 15
Alexander519151, Спасибо за ответы и за ссылку
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
15.09.2014, 00:50

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Убрать отступ сверху
Делаю макет с одной колонкой фиксированной ширины, располагающейся по центру, в колонке будет...

Непонятный отступ сверху
http://jsfiddle.net/4PFt7/47/ Почему красный парень стоит на расстоянии сверху???

Не убирается отступ сверху
Остается маленький отступ вверху страницы. Как его убрать? &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;...

Html Таблица: отступ сверху
Приветствую! Имеется простая html таблица &lt;table&gt; &lt;thead style=&quot;position: absolute;&quot;&gt; &lt;tr&gt;...


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

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.