X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Убрать расстояние между блоками
Дмитрий123
Дмитрий123
Topic Starter сообщение 27.12.2010, 23:41; Ответить: Дмитрий123
Сообщение #1


<html>
<head>
<style>
* {margin: 0; padding: 0}
div {display: inline-block;border: 1px solid black;}
.block {width: 100px; height: 100px;}
</style>
</head>
<body>
<div class="block"></div>
<div class="block"></div>
</body>
</html>

Выводится два блока с промежутком, как от него избавится?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 27.12.2010, 23:44; Ответить: FightInGlory
Сообщение #2


[CSS]
margin-left:-4px;
[/CSS]
Если кто подскажет как это по другому победить буду тоже очень признателен.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 28.12.2010, 6:43; Ответить: Alcorn
Сообщение #3


Поставить их вместе без переносов и пробелов - <div class="block"></div><div class="block"></div>
+ прописать vertical-align:top; а то вертикали могут уехать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 28.12.2010, 10:32; Ответить: FightInGlory
Сообщение #4


и ничгео не изменится. Свойство vertical-align работает только при display:table-cell
дело не в пробелах это 100%, в любом случае останется зазор в 4 пикселя.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 28.12.2010, 10:59; Ответить: Alcorn
Сообщение #5


:)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
* {
margin:0;
padding:0;
}
div {
vertical-align:top;
display:inline-block;
border:1px solid black;
}
.block {
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="block"></div><div class="block"></div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 28.12.2010, 11:19; Ответить: FightInGlory
Сообщение #6


Неверный пример, вот смотрите, как я и гвоорил ничего из того что вы предложили не работает.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
* {
margin:0;
padding:0;
}
body,html{
height:100%;
width:100%;
}
.menu{
height:500px;
background:green;
vertical-align:middle;/*не работает как я и говорил*/
}
.block {
width:100px;
height:100px;
display:inline-block;
background:red;
}
</style>
</head>
<body>
<div class="menu">
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>

Как видно отступ 4 пикселя так и остался.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 28.12.2010, 11:30; Ответить: Alcorn
Сообщение #7


Повторяю, vertical-align:top; нужен, чтобы блоки не уезжали по вертикали, это может происходить например при цикличном заполнении слева-направо и данное свойство прекрасно с этим справляется.

Второе, блоки должны идти без переносов по "Enter" и без пробелов между ними, у вас в коде они написаны с переносом.

Собственно ваш код не удовлетворяет этим условиям, поэтому и не работает. Я выше привёл рабочий вариант.

Третье, для IE 6,7 вместо display:inline-block используется display:inline;zoom:1;
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 28.12.2010, 11:32; Ответить: FightInGlory
Сообщение #8


Насчет отступов вы правы, насчет свойства vertical-align пока не переубедили)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 28.12.2010, 11:41; Ответить: Alcorn
Сообщение #9


Проверить просто. Поставьте в ряд к примеру 7 блоков размером 200x200, главное чтобы хотя бы один из них перешёл на вторую строку и увидите отступ между строками. Теперь пишем vertical-align:top; и отступ пропадает.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 28.12.2010, 12:37; Ответить: FightInGlory
Сообщение #10


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
* {
margin:0;
padding:0;
}
body,html{
height:100%;
width:100%;
}
.menu{
height:500px;
background:green;
vertical-align:top;
}
.block {
width:200px;
height:100px;
display:inline-block;
background:red;
}
</style>
</head>
<body>
<div class="menu">
<div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div>
</div>
</body>
</html>

закинул вроде как вы сказали, но зазор остался.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как вы сравниваете ТОП сайтов между собой?
 5 noviktamw 6383 10.1.2024, 13:23
автор: wanessa
Открытая тема (нет новых ответов) Продам генератор постов для соц. сетей, работающий на контенте со сторонних сайтов, со встроенными своими рекламными блоками под выведение нужной рекламы
 0 Tutich 2506 19.8.2021, 9:47
автор: Tutich
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
 10 NikN 2637 6.1.2021, 23:24
автор: buypushplatform
Открытая тема (нет новых ответов) Автоматическая перелинковка между страницами Wordpress
 4 rokot 2303 28.7.2019, 20:56
автор: rokot
Открытая тема (нет новых ответов) Как убрать полоски с картинками “PushDown”
 4 mstdmstd 5736 8.10.2018, 17:31
автор: -Сабж-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 19.4.2024, 7:28

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet