<div class="one">
  <img src="https://cdn.pixabay.com/photo/2014/02/01/17/28/apple-256261_960_720.jpg">
  <h1>Inline</h1>
</div>

<div class="two">
  <img src="https://cdn.pixabay.com/photo/2014/02/01/17/28/apple-256261_960_720.jpg">
  <h1>Block</h1>
</div>

<div class="three">
  <img src="https://cdn.pixabay.com/photo/2014/02/01/17/28/apple-256261_960_720.jpg">
  <h1>Inline-Block</h1>
</div>

/* Base Styles */
body {
  background-color: gray;
  padding: 50px;
}

img {
  width: 50%;
}

div {
  border: 2px solid green;
  background-color: white;
  margin: 20px;
}

/* Inline, Block, and Inline-Block values */
.one h1 {
  display: inline;
  font-size: 35px;
}

.two h1 {
  display: block;
  font-size: 35px;
  padding: 10px;
  height: 20px;
}

.three h1 {
  display: inline-block;
  font-size: 35px;
  padding: 10px;
  height: 20px;
}