Again I’m continuing with my HTML & CSS course today https://www.youtube.com/watch?v=G3e-cpL7ofc
Today we looked at different CSS Display Properties
- Block elements take up a whole line (e.g.
<p>) - Inline-block elements take up only as much space as they need to (e.g.
<img>,<input>) - inline-elements appear within a line of text (e.g.
<strong>)
My Code
The code shows how to change a block element to an inline-block element and the other way around. It’s not complicated but very good for me to know, so that was another nice short lesson :)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YouTube.com Clone</title> <style> .thumbnail { width: 300px; display: block; } .search-bar { font-size: 20px; margin: 12px; } .video-title { width: 300px; } .video-author, .video-stats { display: inline-block; } </style> </head> <body> <input class="search-bar" type="text" placeholder="Search"> <img class="thumbnail" src="thumbnails/thumbnail-1.webp" alt=""> <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p> <p class="video-author">Marques Brownlee</p> <p class="video-stats">3.4M views · 6 months ago</p> </body> </html> 
Top comments (0)