DEV Community

Joëlle
Joëlle

Posted on • Edited on

4 2

Day 9 - Digging Deeper into CSS - The Box Model

I'm back. I'm still struggling with keeping a good pace and for now I think I'm gonna hold myself to 2 hours of studying minimum on weekdays and 4 hours on weekends. Outside of those hours, I will still be reading different blogs and watch videos. I have weeks where I spend a lot of hours outside of work studying and coding then I crash. I crash because I am not sleeping regularly and for a better learning experience.

And with that, I am hoping this change is going to help me be consistent.

So I have taken a few HTML and CSS courses and followed some projects and even made my own. While I have learned a lot I want to get deeper into CSS and for the next few days, that's what I will be doing.

Today, it's all about the Box Model and the things that I missed:

The Box Model is a concept that states that every element on a page is a rectangular box and may have width, height, padding, borders, and margins.

Sizing Inline Elements

Inline Elements are elements that are displayed inline and takes the width of the content they hold. They do not take the full width of the page unlike block elements. As such, they do not accept properties such as weight and height. They also do not accept the vertical margin top and bottom.

I wanted to know if there is a way we can size an inline element using CSS and I found 2 solutions:

1- Setting the width and height in HTML either directly or using inline CSS.

a) HTML
img src="sample.jpg" width="100px" height="100px"

b) Inline CSS
img src="sample.jpg" style="width:100px;height:100px;"

2- Setting the display of the elements as block or inline-block in CSS.

a) block will sit in a single line and you might need to tweak more if you want to other elements on the same line.

b) inline-block will sit multiple elements on the same line.

Using Border-Radius
I may have seen more but the only time I used border-radius, it was on all corders to slightly round them or to make a circle.

The shorthand property for border-radius goes top-left / bottom-right and top-right / bottom left

To see how this worked, I hopped on code pen and played and saw how I could use that property to make shapes.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more