@ -43,7 +43,7 @@ Generally speaking: block elements are elements which the browser renders as a b
Block elements are typically things like <div>, <ul>, and header (<h1>…<h6>) elements - although most HTML elements can be rendered as a block if you enforce it with the `display: block` rule. Here’s a quick example:
Block elements are typically things like <div>, <ul>, and header (<h1>…<h6>) elements - although most HTML elements can be rendered as a block if you enforce it with the `display: block` rule. Here’s a quick example:
```
```html
<divstyle="
<divstyle="
padding: 10px;
padding: 10px;
background: gray;
background: gray;
@ -61,7 +61,7 @@ Block elements are typically things like <div>, <ul>, and header (&l
See how this box automatically takes the full width? We can give it a fixed width and it will behave slightly differently:
See how this box automatically takes the full width? We can give it a fixed width and it will behave slightly differently:
```
```html
<divstyle="
<divstyle="
width:200px;
width:200px;
padding: 10px;
padding: 10px;
@ -108,7 +108,7 @@ So if that’s block elements, how are inline elements different?
Inline elements are things like <a>, <b>, <i>, and <span> tags. These are effectively treated as text, they wrap at the end of the line, and generally flow like you would expect text to in a word processor, although they don’t necessarily have to be text:
Inline elements are things like <a>, <b>, <i>, and <span> tags. These are effectively treated as text, they wrap at the end of the line, and generally flow like you would expect text to in a word processor, although they don’t necessarily have to be text:
```
```html
<imgsrc="https://placekitten.com/250/100"/>
<imgsrc="https://placekitten.com/250/100"/>
<imgsrc="https://placekitten.com/250/100"/>
<imgsrc="https://placekitten.com/250/100"/>
<imgsrc="https://placekitten.com/250/100"/>
<imgsrc="https://placekitten.com/250/100"/>
@ -128,7 +128,7 @@ One downside to inline display elements like this is that we have very little co
Because these images are treated as very tall text, other text immediately before or after the kittens can also get weird - inline elements **don’t** clear space beside them like block elements:
Because these images are treated as very tall text, other text immediately before or after the kittens can also get weird - inline elements **don’t** clear space beside them like block elements:
```
```html
Text immediately before an image
Text immediately before an image
<imgsrc="https://placekitten.com/100/100"/>
<imgsrc="https://placekitten.com/100/100"/>
<imgsrc="https://placekitten.com/100/100"/>
<imgsrc="https://placekitten.com/100/100"/>
@ -144,7 +144,7 @@ Text immediately after
But remember we said before that any of these `display` properties can be overwritten?! If we instead set our kittens to be `display: block` then we see that our kittens suddenly behave much more like our space-clearing box from earlier:
But remember we said before that any of these `display` properties can be overwritten?! If we instead set our kittens to be `display: block` then we see that our kittens suddenly behave much more like our space-clearing box from earlier:
**Note:** This technique of setting images to be `display: block` is often used for illustrations on the web - just add an `auto` side margin and it’s even centered:
**Note:** This technique of setting images to be `display: block` is often used for illustrations on the web - just add an `auto` side margin and it’s even centered:
```
```html
Illustration of a kitten:
Illustration of a kitten:
<imgstyle="display: block; margin: 20px auto"src="https://placekitten.com/200/300"/>
<imgstyle="display: block; margin: 20px auto"src="https://placekitten.com/200/300"/>
(Text after the kitten)
(Text after the kitten)
@ -175,7 +175,7 @@ Now you might be thinking _“Couldn’t I just use <p> tags for my text a
It’s true that if you put your text in <p> tags then you get a nice result more or less for free:
It’s true that if you put your text in <p> tags then you get a nice result more or less for free:
```
```html
<p>Text in a <p> before an image</p>
<p>Text in a <p> before an image</p>
<imgsrc="https://placekitten.com/300/200"/>
<imgsrc="https://placekitten.com/300/200"/>
<p>Text in a <p> after</p>
<p>Text in a <p> after</p>
@ -197,7 +197,7 @@ So it should come as no surprise to you that an element with the style rule `dis
This kind of element is commonly used for photo galleries or navigation menus like this:
This kind of element is commonly used for photo galleries or navigation menus like this: