md`
## Inline VS Block
By default, HTML elements have a display behavior as block or inline. Elements that starts with a new line are categorized as **block-level elements**, and other elemets that can be placed side by side are **inline elements**.
### Block-level elements
* Each gets displayed in a new line
* Take full-width (100% width) by default
* can set its width and height properties
Example:
\`\`\`HTML
<html>
<head>
<style>
.paragraph{
height: 100px;
width: 100px;
background: red;
color: white;
}
</style>
</head>
<body>
<h2>Block Level Elements</h2>
<p class="paragraph">P1</p>
<p class="paragraph">P2</p>
<p class="paragraph">P3</p>
</body>
</html>
\`\`\`
<img src="${await FileAttachment("image.png").url()}" style="width: 500px;">
### Inline elements
* Take only as much space as they need
* Don’t accept top-bottom margin or width properties
Example:
\`\`\`HTML
<html>
<head>
<style>
.paragraph{
/*height and width are not working in inline*/
height: 100px;
width: 100px;
background: red;
color: white;
display:inline;
}
</style>
</head>
<body>
<h2>Block Level Elements</h2>
<p class="paragraph">P1</p>
<p class="paragraph">P2</p>
<p class="paragraph">P3</p>
</body>
</html>
\`\`\`
<img src="${await FileAttachment("image@1.png").url()}" style="width: 900px;">
`
md`
## Alignments
CSS can help us align items like div, text or image (and more!) inside the page's layout.
### Center align text
text-align: center can horizontally align the text in the center of the element.
Example:
\`\`\`HTML
<html>
<head>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<h3>Centering Text</h3>
<div class="center">
<p>This paragraph is centered.</p>
</div>
</body>
</html>
\`\`\`
<img src="${await FileAttachment("image@7.png").url()}" style="width: 900px;">
### Center align Image
The best way to center an image is to set the left and right margin to auto and then make the image a block element:
Example:
\`\`\`HTML
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center the Image</h2>
<img src="paris.jpg" alt="Paris" style="width:40%">
</body>
</html>
\`\`\`
Image source form W3School.
<img src="${await FileAttachment("image@3.png").url()}" style="width: 900px;">
### Center align Elements
The best way to center an element is to set the margin to auto.
Example:
\`\`\`HTML
<html>
<head>
<style>
.center {
margin: auto;
width: 50%;
border: 3px solid steelblue;
text-align: center;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<div class="center">
<p>This is how you align elements!</p>
</div>
</body>
</html>
\`\`\`
<img src="${await FileAttachment("image@6.png").url()}" style="width: 900px;">
More alignments on alignments like vertically align items can be found here:
* [CSS layout](https://www.w3schools.com/css/css_align.asp)
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
