Image for post
Image for post

The CSS Box Model is what defines how much space an element takes up on the page. The Box Model is divided up into four major parts: Content, padding, border, and margins.

Within your web browser’s element inspector, you can look at each element’s box model. In Chrome, this is found under the Elements tab in a Styles submenu.

Image for post
Image for post
Chrome’s CSS box model for an element shows each area and its values. In this example, I have 16 pixels of margin around the top, right, and bottom and a content area 300 pixels wide by ~288 pixels high.

If you hover your mouse over the different areas in that model, it will highlight those areas within the page.

Image for post
Image for post
When I place my cursor over the margin area in the box model from above, Chrome highlights how those numbers show up in the page.

Let’s dive a little deeper on what each area is.

The Content Area

This is where you’ll put text or other elements. …


Image for post
Image for post

CSS Specificity is what decides what styles are applied to elements; the more specific the CSS selector, the more weight it has in determining the style of an element.

Take the following HTML and CSS as an example:

<article id="css-rocks">
...
</article>
<style>
#css-rocks {
background-color: white;
}
article {
background-color: black;
}
</style>

Q: What background color will the article element have?

A: White, since the CSS selector the white background color is more specific.

To see this in action, the element inspector will show you all the styles applied to an element in the order of specificity.

Image for post
Image for post
In Chrome, the Styles portion of the Elements tab orders styles based on their specificity and crosses out styles that get overwritten by more specific selectors

There are five main levels that determine a style’s specificity and it all has to do with the syntax used in the selector. They are, in order of least-specific to…


Image for post
Image for post

I’ve recently migrated my web application to run inside docker containers and use docker-compose to spin up all the required dependencies in their own containers (Postgres and Redis, in my case). This application uses Python’s Flask framework and I use pdb to debug issues.

While researching solutions, I first ran into this article by Vladyslav Krylasov that suggested adding some configuration to my docker-compose.yaml and using a module called remote-pdb with a telnet client. This worked, but it was a little more cumbersome than I wanted.

My solution was to use docker attach. First, I still needed to edit my docker-compose.yaml file to add the stdin_open and tty attributes to my application…

About

Colin Miller

I’m a software engineer that specializes in front-end web development. Learn more at cjmil.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store