Когда вы используете HTML-блоки div и середина блоков не может быть плотно соединена, ничего сделать невозможно.
1. Вы можете добавить его в середине содержимого <head></head>.
* {
маржа: 0;
дополнение: 0;
}
Обнуление интервала между всеми блоками не конфликтует с полем заполнения ниже.
2. Существует проблема с зазором между верхними и нижними элементами.
Я написал 4 элемента div, распределенные вверх и вниз, с интервалом между ними. Код и эффект следующие:
.div1{
высота: 100 пикселей;
цвет фона: синий;
положение: родственник;
}
.div2 {
высота: 100 пикселей;
цвет фона: сине-фиолетовый;
положение: родственник;
}
.div3{
высота: 100 пикселей;
цвет фона: красный;
положение: родственник;
}
.div4{
высота: 100 пикселей;
цвет фона: желтый;
положение: родственник;
}
<тело>
<div class="div1" >/div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</тело>
Затем я попытался добавить поле:0 к каждому элементу div, чтобы удалить расстояние между элементами. Код выглядит следующим образом:
.div1{
высота: 100 пикселей;
цвет фона: синий;
положение: родственник;
маржа: 0;
}
.div2 {
высота: 100 пикселей;
цвет фона: сине-фиолетовый;
положение: родственник;
маржа: 0;
}
.div3{
высота: 100 пикселей;
цвет фона: красный;
положение: родственник;
маржа: 0;
}
.div4{
высота: 100 пикселей;
цвет фона: желтый;
положение: родственник;
маржа: 0;
}
Результат остается неизменным, но все еще есть пробелы, как показано ниже:
Затем я поискал в Baidu и нашел способ установить размер шрифта, как показано в следующем коде и эффекте:
тело {размер шрифта: 0;}
.div1{
высота: 100 пикселей;
цвет фона: синий;
положение: родственник;
}
.div2 {
высота: 100 пикселей;
цвет фона: сине-фиолетовый;
положение: родственник;
}
.div3{
высота: 100 пикселей;
цвет фона: красный;
положение: родственник;
}
.div4{
высота: 100 пикселей;
цвет фона: желтый;
положение: родственник;
}
Приведенный выше код фокусируется на добавлении body{font-size:0;}, и эффект следующий:
Вы можете видеть, что разрыв между верхом и низом элемента div устранен. Однако между верхом и левым все еще остается пробел.
Вот что я сделал, добавив body{margin:0px;}, код следующий:
тело {маржа: 0 пикселей;}
тело {размер шрифта: 0;}
.div1{
высота: 100 пикселей;
цвет фона: синий;
положение: родственник;
}
.div2 {
высота: 100 пикселей;
цвет фона: сине-фиолетовый;
положение: родственник;
}
.div3{
высота: 100 пикселей;
цвет фона: красный;
положение: родственник;
}
.div4{
высота: 100 пикселей;
цвет фона: желтый;
положение: родственник;
}
Эффект следующий:
Как видите, все пробелы устранены.
Однако проблема все еще существует: установка font-size:0 приведет к исчезновению всех шрифтов.
Вот как я решил эту проблему: добавьте div внутри div и сбросьте размер шрифта внутреннего div, например: font-size:30px;.
Идеальное решение!
3. Очистка DIV+CSS: оба устраняют проблему создания пробела над элементом div после плавания.
Мы знаем, что иногда использование css float приводит к созданию css float. На данный момент нам нужно очистить float. Для этого мы можем использовать атрибут Clear Style.
Однако после использования Clear:both для очистки плавающих элементов над элементом div часто появляется белый пробел, где применяется Clear:both.
Решение состоит в том, чтобы добавить overflow:hidden; в элемент управления над этим элементом.
<div class="спрятан">
<div class="bms_2_1_1 fl">~Пересекаю океан, чтобы увидеть тебя,</div>
<div class="bms_2_1_2 fl"><img src="__STATIC__/images/male.png" width="18" height="18"/></div>
</div>
<div class="b cle hid">Пекин</div>
Описание стиля:
.cle{очистить:оба;}
.hid{переполнение: скрыто;}
.fl{ поплавок: влево;}
.fr{ float:вправо;}
Это способ решить проблему разрыва между div, вызванного Clear: Оба эти дня.
Зачем использовать ясно: оба в div? Главным образом потому, что текст в div b не может быть выровнен по левому краю, даже если в CSS установлено text-align:left; поэтому в этом случае используетсяclear:both.
Несколько вопросов:
(1) Почему text-align:left; китайского текста в div недействителен?
(2) Почему использованиеclear:both может решить проблему, если text-align:left;
(3) Почему использованиеclear:both создает пробелы?
(4) Почему использование overflow:hidden; в элементе div того же уровня выше решает проблему пробелов ниже?
Давайте изучим вышеизложенные вопросы подробно, когда у нас будет такая возможность в будущем.
Подведите итог:
Когда элемент div используетclear:both для создания пробела, вам необходимо добавить overflow:hidden к родственному элементу div над ним, чтобы устранить пробел.