I prefer using flexbox for this kind of layout. the section can be wrapped by div and using display: flex; to push away the <footer>(check the flex-centerclass). I also suggest you to using display: flex;, flex-direction: column; and text-align: center; to vertically align and center every content (check the flex-colclass). In addition, if some images may be stretched, you can use object-fit: contain; to fix it. Moreover, I set the footer position fixed at the bottom by position: fixed; left: 0; bottom: 0;(check the footer in the css ).
(((Also, it would be nice to have more spaces between each column.)))
#box .box {
/* float: left;
width: 30%;
padding: 10px;
/* text-align: center; */
}
.flex-center {
margin: auto;
display: flex;
justify-content: center;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.flex-col img {
object-fit: contain;
}
footer {
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<section class="" id="box">
<div class="container flex-center">
<div class="box flex-col">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png"
height="150px"
alt=""
/>
<h3>HTML markup</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. At
laboriosam quod debitis quae odit nesciunt alias quas facere
pariatur exercitationem.
</p>
</div>
<div class="box flex-col">
<!-- <div class="box"></div> -->
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png"
alt=""
height="150px"
/>
<h3>CSS3</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. At
laboriosam quod debitis quae odit nesciunt alias quas facere
pariatur exercitationem.
</p>
</div>
<div class="box flex-col">
<img
src="https://designrfix.com/wp-content/uploads/2018/01/Graphic-_Design.jpg"
height="140px"
alt=""
w
/>
<h3>Grahpic</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. At
laboriosam quod debitis quae odit nesciunt alias quas facere
pariatur exercitationem.
</p>
</div>
</div>
</section>
<footer>Testing testing testing:: copyright 2017 ©</footer>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
