Непонятные рамки

@Beezy · Регистрация: 14.09.2014

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

Здравствуйте, почему при изменении масштаба появляется лишнее пространство?

HTML5

<div class="content">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

CSS

.content {
    width: 400px;
    height: 462px;
    background: #00ff27;
}
.one {
    width: 300px;
    height: 150px;
    border-bottom: 4px solid #3b00ff; 
    background: #b28686;
}
.two {
    width: 300px;
    height: 150px;
    border-bottom: 4px solid #3b00ff;
    background: #86b2af;
}
.three {
    width: 300px;
    height: 150px;
    border-bottom: 4px solid #3b00ff;
    background: #b286b2;
}

В чем может быть дело, мне кажется, все дело в рамках?

@paskalnikita · 08.02.2015, 12:36

Эта зеленая полоса появляется от блока, который находится справа от этих трех. Задайте свойство float. Тогда блоки будут прижаты к краям.

@Beezy · 08.02.2015, 12:50 **[ТС]**

Нее, зеленый - это блок родитель(content в коде). Специально ярче сделал, чтобы полосу было видно.

@Merisho · 08.02.2015, 13:08

Ну, математика.Дочерние элементы каждый высотой 150px.
150px*3=450px, в то время как родитель высотой 462px => 462px-450px=12px остаётся снизу родителя.

@Beezy · 08.02.2015, 13:11 **[ТС]**

Математика : (150 + 4) + (150 + 4) + (150 + 4) = 462px!

@fol · 08.02.2015, 13:41

это особенности рендеринга браузеров. просто не надо задавать высоту у родителя (.content)

@Beezy · 08.02.2015, 13:42 **[ТС]**

Решил проблему:

CSS

1
2
3

.content {
    height: 462px;
}

Поменял на:

CSS

1
2
3

.content {
    max-height: 462px;
}

Добавлено через 57 секунд
fol, тоже работает Ваш вариант, а как лучше сделать?

@fol · 08.02.2015, 13:50

зачастую высоту задавать не нужно (сам стараюсь этого избегать), потому что контент распирает блоки. а так, можно воспользоваться любым способом

@Beezy · 09.02.2015, 09:19 **[ТС]**

Попробовал пример посложнее и понял, что дело в border. Действительно ли из-за него съезжает? И как тогда его использовать, ведь это фундаментальное свойство? Ответьте, пожалуйста.

Добавлено через 1 час 15 минут
помогите, как лучше сделать

Добавлено через 11 часов 29 минут
может эти рамки, как картинку сверстать?

@Goldsilver · 09.02.2015, 15:33

Если я понял, ваша проблема в том, что из за рамок итогавая высота больше той, что задали?
Чтобы браузер считал ширину/высоту вместе с рамками, и не было проблем с "неучтенными пикселами от рамок", можно задать такое свойство:

CSS

/* если конкретно хотите к блоку — то вместо звездочки селектор/класс/id тега */
* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

по идее в 150рх включится и рамка (т.е. рамка-сверху + рамка-снизу + высота = 150рх) Как-то так

@Beezy · 09.02.2015, 17:35 **[ТС]**

Goldsilver, то, что нужно, спасибо.

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	08.02.2015, 12:36	2
	Эта зеленая полоса появляется от блока, который находится справа от этих трех. Задайте свойство float. Тогда блоки будут прижаты к краям. 0

@Beezy 0 / 0 / 0 Регистрация: 14.09.2014 Сообщений: 173
	08.02.2015, 12:50 [ТС]	3
	Нее, зеленый - это блок родитель(content в коде). Специально ярче сделал, чтобы полосу было видно. 0

@Merisho 8 / 8 / 4 Регистрация: 23.05.2012 Сообщений: 87
	08.02.2015, 13:08	4
	Ну, математика.Дочерние элементы каждый высотой 150px. 150px*3=450px, в то время как родитель высотой 462px => 462px-450px=12px остаётся снизу родителя. 0

@Beezy 0 / 0 / 0 Регистрация: 14.09.2014 Сообщений: 173
	08.02.2015, 13:11 [ТС]	5
	Математика : (150 + 4) + (150 + 4) + (150 + 4) = 462px! 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	08.02.2015, 13:41	6
	это особенности рендеринга браузеров. просто не надо задавать высоту у родителя (.content) 1

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	08.02.2015, 13:50	8
	зачастую высоту задавать не нужно (сам стараюсь этого избегать), потому что контент распирает блоки. а так, можно воспользоваться любым способом 1

@Beezy 0 / 0 / 0 Регистрация: 14.09.2014 Сообщений: 173
	09.02.2015, 09:19 [ТС]	9
	Попробовал пример посложнее и понял, что дело в border. Действительно ли из-за него съезжает? И как тогда его использовать, ведь это фундаментальное свойство? Ответьте, пожалуйста. Добавлено через 1 час 15 минут помогите, как лучше сделать Добавлено через 11 часов 29 минут может эти рамки, как картинку сверстать? 0

@Beezy 0 / 0 / 0 Регистрация: 14.09.2014 Сообщений: 173
	09.02.2015, 17:35 [ТС]	11
	Goldsilver, то, что нужно, спасибо. 0

Опции темы

Непонятные рамки

Решение