CSS Display

By Tony 8.14.2024

Welcome to the advanced section of the CSS course here on MacLearn! Today, we'll be learning how to arrange the layout of your website with the powerfull CSS display.

Above, we have four different display rules, even though there are tons more display values that you can play around with, but these four are the most useful and intuitive. The display property basically changes how the element behaves in accordance to the CSS box model, which we've covered earlier. First, we have display: block;. It lets the element behave like a block, meaning that it stretches out to its maximum width and pushes(breaks) other elements around it into a new line on the page, making them stack vertically on the page. The block also maintains its padding and margin if you've set any. display: inline; is a seperate story though. The element is now literally in-line, like a word in a paragraph. It doesn't stretch out fully and doesn't break into a new line. Additionally, some padding/margin will work differently, and the height and width properties also don't apply to inline elements. Well, what if you want to set the height and width of an element but you don't want it to break into a new line? That's where display: inline-block; comes in! With this value, the element behaves exactly like a block element, with custom sizes and padding/margin, except it doesn't break into a new line! Lastly, display: none; makes the element invisible and basically "removes" it from the page, so it doesn't take up any space.

Feel free to try out the different display values along with different sizes and padding/margin in the playground above and see what happens to the block, the text, and the layout of the page! After you're confident on your knowledge, move on and learn about CSS flexbox, arguably the most important CSS property on webpage layout. Have fun!

Bonus: corner rounding

If you pay attention to websitesm you'll notice rounded corners are everywhere in modern design. From a video's edges, an image's corners, and even the buttons below, are rounded. How exactly do we get rid of the sharp corners and replace them with smooth rounded corners using CSS?

You only need one CSS property to achieve this effect: border-radius. Imagine the corner as a circle. This property determines how wide the circle should be using the radius defined, using pixels (px), and replaces the sharp corner with the round circle, achieving the rounded effect. The more the radius, the more rounded the corner becomes. The first rule in the snippet above applies a corner radius of 20px to all 4 corners of the element. What if you want different roundness on different corners? The second rule applies different values to each corner. The first value is for the radius of the top-left corner, the second value for top-right, the third for bottom-right, and the fourth for bottom-left. Feel free to try it out and see the magic at work!