Question about alternative solution for exercise 7g #114
Description
Hi, I’m currently following your HTML/CSS course and practicing the exercises.
For exercise 7g (Twitter text box), you used vertical-align: middle on each inline element (image, input, button) to correctly align everything horizontally.
I tried solving it using a different approach, and although my method is not the same as your solution, the output looks almost identical. I wanted to ask:
Is it okay to write the code differently as long as the final layout matches the design?
Or is there a specific reason why the vertical-align method is preferred for this lesson?
Here is the code I wrote:
<!DOCTYPE html>
<html>
<head>
<title>7g exercise</title>
<style>
.G7_1{
height:40px;
width:40px;
object-fit: cover;
border-radius: 20px;
object-position: right;
vertical-align: middle;
}
.G7_21{
background-color: white;
border: none;
margin-right: 80px;
}
.G7_22{
font-family: Arial, sans-serif;
font-size: 15px;
color: rgb(134, 126, 126);
}
.G7_3{
height: 34px;
width: 85px;
border-radius: 20px;
border: none;
color: white;
background-color: rgb(52, 136, 220);
font-weight: bold;
vertical-align: left;
cursor: pointer;
}
</style>
</head>
<body>
<p>7g</p>
<img class="G7_1" src="pics/thumbnail-2.webp">
<button class="G7_21">
<p class="G7_22">What's happening?</p>
</button>
<button class="G7_3">tweet</button>
</body>
</html>Thanks again for creating this course — it's helping me learn a lot!