Почему не работает свойство display со значением inline?

@PriZrаK · Регистрация: 28.01.2014

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

Например:

HTML5

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <div></div>
    <div></div>
</body> 
</html>

CSS

div {
    width:500px;
    height:200px;
    background-color: aqua;
    display:inline-block;
}

Но с inline-block работает, почему?

@Jewbacabra · 25.03.2015, 08:56

PriZrаK, в чем заключается неработоспособность? width и height не могут быть применены к inline

@Fedor92 · 25.03.2015, 11:38

PriZrаK, потому-что если Вы задаёте блочному элементу он будет отображаться, как встроенный... А inline-block оставляет элемент блочным, но способствует его обтеканию... Иными словами задавая элементу display:inline - его размеры будут зависеть от его наполнения - даже если Вы ему задали определённые размеры, а если задать элементу display: inline-block при это указав его размеры - он никак не изменится и примет значения высоты и ширины(только появится обтекание)...
Небольшой пример:

HTML5

1 2	<div style="display:inline; width:300px; height:200px; border:2px solid red}">Lorem ipsum</div> <div style="display:inline-block; width:300px; height:200px; border:2px dotted blue}"></div>

@PriZrаK · 25.03.2015, 15:22 **[ТС]**

Все понял, только что такое обтекание?

@Fedor92 · 25.03.2015, 16:08

Сообщение от PriZrаK

Все понял, только что такое обтекание?

К примеру у вас есть два блока(два дива)... Если использовать свойство display:inline-block, то получится что первый блок обтекает второй слева относительно второго блока, а второй блок обтекает первый справа относительно первого блока... Иными словами обтекание определяет месторасположение объектов относительно друг друга(слева или справа)... Аналогично данному свойству - свойство float

Почему не работает свойство display со значением inline?

Решение

Решение

Решение

@Jewbacabra 4925 / 3920 / 1620 Регистрация: 24.04.2014 Сообщений: 11,441
	25.03.2015, 08:56	2
	Сообщение было отмечено PriZrаK как решение Решение PriZrаK, в чем заключается неработоспособность? width и height не могут быть применены к inline 0

@PriZrаK -27 / 0 / 1 Регистрация: 28.01.2014 Сообщений: 145
	25.03.2015, 15:22 [ТС]	4
	Все понял, только что такое обтекание? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	25.03.2015, 16:08	5
	Сообщение было отмечено PriZrаK как решение Решение Сообщение от PriZrаK Все понял, только что такое обтекание? К примеру у вас есть два блока(два дива)... Если использовать свойство display:inline-block, то получится что первый блок обтекает второй слева относительно второго блока, а второй блок обтекает первый справа относительно первого блока... Иными словами обтекание определяет месторасположение объектов относительно друг друга(слева или справа)... Аналогично данному свойству - свойство float 1