<div></div> и <div/> в чем разница?

#html #div

Есть два примера. Почему в первом примере показует 3 блока, в то время как во втором
примере показует один?


 1. 







	



	

	

	









 2. 







	



	

	

	







    

Ответы

Ответ 1

div относится к тэгам-контейнерам и требует парного закрывающего тэга. В вашем примере
во втором случае, закрывающие тэги отсутствуют, поэтому блоки просто вложены один в другой.

приведу пару цитат 


  Теги бывают двух типов — одиночные и парные (контейнеры). Одиночный
  тег используется самостоятельно, а парный может включать внутри себя
  другие теги или текст
  
  Парные теги, называемые по-другому контейнеры, состоят из двух частей
  — открывающий и закрывающий тег. Открывающий тег обозначается как и
  одиночный — <тег>, а в закрывающем используется слэш — .
  Допускается вкладывать в контейнер другие теги, однако следует
  соблюдать их порядок. 
  
  Не все контейнеры требуют обязательно закрывающего тега, иногда его
  можно и опустить. 


что касается закрытия /> то это не валидный HTML-синтаксис.  Данная конструкция относится
к XML, так что браузеры попросту игнорируют этот слэш в конце. В HTML-тэги либо не
закрываются, либо закрываются парным закрывающим 



.my {
  height: 100px;
  width: 200px;
  margin: 10px;      
}
    
.red {background-color: red;}
.green {background-color: green;}
.blue {background-color: blue;}





Ответ 2

Там три блока на самом деле, просто т.к. браузер не видит закрывающего тега, он вкладывает
их друг в друга и они друг на друга накладываются, потому может показаться, что только
один блок отрисован. Это можно было бы понять, взглянув на код страницы с браузере.
Результат такой из-за того, то в большинстве браузеров не предусмотрена такая вот
конструкция.