Display Property - block, inline

pktcodes · pktcodes · commit 6f75e385fe80 · 2022-11-03T22:44:08.000-05:00
diff --git a/index.html b/index.html
@@ -4,20 +4,21 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CSS Box Model</title>
+    <title>Display Property</title>
 
     <!-- Stylesheet -->
     <link rel="stylesheet" href="./styles.css" />
   </head>
 
   <body>
-    <h2>hello world</h2>
-    <h2>hello world</h2>
-    <h2>hello world</h2>
-    <h2>hello world</h2>
-    <h2>hello world</h2>
-    <h2>hello world</h2>
-    <h2>hello world</h2>
-    <h2>hello world</h2>
+    <!-- Block elements -->
+    <div class="block">I'm a block element</div>
+    <h1 class="block">I'm a block element</h1>
+    <p class="block">I'm a block element</p>
+
+    <!-- Inline elements -->
+    <span class="inline">I'm an inline element</span>
+    <a class="inline">I'm an inline element</a>
+    <img src="./smoothie.jpg" alt="smoothie" width="100" class="inline" />
   </body>
 </html>
diff --git a/smoothie.jpg b/smoothie.jpg
diff --git a/styles.css b/styles.css
@@ -1,7 +1,19 @@
 /* 
-Border Hack - to troubleshoot layout
+ELEMENTS HAVE IT SET BY DEFAULT
+BLOCK : Always starts a new line and spans full width
+INLINE : Does not start a new line and spans only content
 */
 
-* {
-  border: 2px solid red;
+.block {
+  background: blue;
+  color: white;
+  display: block;
+  display: inline;
+}
+
+.inline {
+  background: red;
+  color: white;
+  display: inline;
+  display: block;
 }
