Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/index.html

Created February 23, 2023 23:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save prof3ssorSt3v3/5fa29c9d678e71103ef2b25dce2c76d9 to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/5fa29c9d678e71103ef2b25dce2c76d9 to your computer and use it in GitHub Desktop.
Download ZIP
inline vs inline-block
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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>Document</title>
<style>
p {
padding: 1rem;
margin: 1rem;
}
p:nth-child(1) {
background-color: cornflowerblue;
}
p:nth-child(2) {
background-color: rosybrown;
}
p span {
font-size: 2rem;
background-color: red;
color: white;
padding: 1rem;
margin: 1rem;
width: 200px;
}
p:nth-child(1) span {
display: inline;
}
p:nth-child(2) span {
display: inline-block;
}
</style>
</head>
<body>
<p>
<img src="https://picsum.photos/300" />
<span>Inline</span>
</p>
<p>
<img src="https://picsum.photos/300" />
<span>Inline-block</span>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment