vicyap · September 6, 2023 16:46
diff --git a/index.html b/index.html
 <html>
 <body>

 <div style="background-color: #cccccc">
  <!--
  The <p> element is a block element. White space around it is effectively ignored.
  Block elements are laid out in the direction of the document, in this case that
  is top to bottom.
  -->

  <!-- Notice that these two <p> elements appear separated by a line break -->
  <p>1 Hello World!</p><p>1 Hello World!</p>


  <!-- Notice that even with extra line breaks (whitespace) before and after
  this <p> element, it is still appears separated by 1 line break -->
  <p>2 Hello World!</p>


 </div>

 <div style="background-color: #cccccc">
  <!--
  The <span> element is an inline element. Which means white space BETWEEN
  elements is COLLAPSED.
  -->
  
  <!-- Notice there is no space between Hello and World! -->
  <p>
  <span>3 Hello</span><span>World!</span>
  </p>

  <!-- Notice there is a space between Hello and World! -->
  <p>
  <span>4 Hello</span> <span>World!</span>
  </p>

  <!-- Notice there is A SINGLE space between Hello and World,
  even though this HTML has a line break, tabs and spaces between
  the two <span> elements -->
  <p>
  <span>5 Hello</span>

      <span>World!</span>
  </p>
 </div>

 <div style="background-color: #cccccc">
  <!--
  A block element can have its display property changed to inline.
  -->
  
  <!-- Notice there is a space between these two Hello Worlds.
  That's because the line break collapses to a single space. -->
  <p style="display: inline-block">6 Hello World!</p>
  <p style="display: inline-block">6 Hello World!</p>
  
  <br>
  
  <!-- Notice there is no space between these two Hello Worlds.
  That's because the <p> elements are now inline. -->
  <p style="display: inline-block">7 Hello World!</p><p style="display: inline-block">7 Hello World!</p>
 </div>

 <div style="background-color: #cccccc">
  <!--
  There is also the "white-space" CSS property that controls how

      Whether and how white space is collapsed.
      Whether and how lines wrap.

  https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
  -->

  <!-- "normal" is the default behavior, which collapses
  sequences of whitespace. --> 
  <p style="white-space: normal">
  8 Hello W o  r    l    d!
  </p>
  
  <!-- "pre" preserves whitespace -->
  <p style="white-space: pre">
 9 Hello W o  r
 l    
  d!
  </p>
 </div>

 </body>
 </html>
	<html>
	<body>

	<div style="background-color: #cccccc">
	<!--
	The <p> element is a block element. White space around it is effectively ignored.
	Block elements are laid out in the direction of the document, in this case that
	is top to bottom.
	-->

	<!-- Notice that these two <p> elements appear separated by a line break -->
	<p>1 Hello World!</p><p>1 Hello World!</p>


	<!-- Notice that even with extra line breaks (whitespace) before and after
	this <p> element, it is still appears separated by 1 line break -->
	<p>2 Hello World!</p>


	</div>

	<div style="background-color: #cccccc">
	<!--
	The <span> element is an inline element. Which means white space BETWEEN
	elements is COLLAPSED.
	-->

	<!-- Notice there is no space between Hello and World! -->
	<p>
	<span>3 Hello</span><span>World!</span>
	</p>

	<!-- Notice there is a space between Hello and World! -->
	<p>
	<span>4 Hello</span> <span>World!</span>
	</p>

	<!-- Notice there is A SINGLE space between Hello and World,
	even though this HTML has a line break, tabs and spaces between
	the two <span> elements -->
	<p>
	<span>5 Hello</span>

	<span>World!</span>
	</p>
	</div>

	<div style="background-color: #cccccc">
	<!--
	A block element can have its display property changed to inline.
	-->

	<!-- Notice there is a space between these two Hello Worlds.
	That's because the line break collapses to a single space. -->
	<p style="display: inline-block">6 Hello World!</p>
	<p style="display: inline-block">6 Hello World!</p>

	<br>

	<!-- Notice there is no space between these two Hello Worlds.
	That's because the <p> elements are now inline. -->
	<p style="display: inline-block">7 Hello World!</p><p style="display: inline-block">7 Hello World!</p>
	</div>

	<div style="background-color: #cccccc">
	<!--
	There is also the "white-space" CSS property that controls how

	Whether and how white space is collapsed.
	Whether and how lines wrap.

	https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
	-->

	<!-- "normal" is the default behavior, which collapses
	sequences of whitespace. -->
	<p style="white-space: normal">
	8 Hello W o r l d!
	</p>

	<!-- "pre" preserves whitespace -->
	<p style="white-space: pre">
	9 Hello W o r
	l
	d!
	</p>
	</div>

	</body>
	</html>