<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.boximg-image{
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="app-assets/images/course-images/html-programming-2.png" width="350" height="263" alt="aimtocode">
<div class="boximg-image">The picture above is 200px height. The total width of this element is also 320px.</div>
</body>
</html>