CSS From the Ground Up

The difference between block and inline

Block elements have a width of 100% by default, while inline elements have a width proportional to their content.

Flexbox

By default, flex children will grow according to the content inside them.
The length of the longest word inside an element determines the “minimum” size that element.

Margins

The two divs each have a 1em margin, but that does not mean that the space between them is 2em.
The margins collapse here, so you don’t see any space between the blue outline and the red outline.
The div with text inside has no margin, while the <p> does have margin.

Em units

  • When setting margin and padding, 1em is equal to the font-size of the element. That means that if I set my padding to 2em and the font size is 16px, the padding will be 32px.
  • When setting font-size itself, 1em is actually equal to the font-size of the parent element. So if my parent's font size is 16px, and I set font-size: 2em, that will make my own font size 32px. Then if I set my margin to 2em, the margin will be 32px • 2= 64px.
The value of 1em is dependent on the parent’s font size.

Grid, positioning, background-blend-mode

Moody red tint added to Hopper’s Nighthawks with CSS.

CSS is itself a system that evolves over time

Some closing thoughts

--

--

--

kasra.io

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

OOPs(Object Oriented Programing)

What you need to know about Java 13

Launch Zoom Meeting Automatically from Telegram Bot

Java — Close Your Resources with Try-With-Resource

Career in 2022 as .NET Developer

MetaMask Monthly: February, 2021

NFUP, Signed contract for a Hanok Pension Platform

How to make a div center in HTML

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
Kasra

Kasra

kasra.io

More from Medium

HTML & CSS — How to Split a Background Into 2 Colors

New to Flexbox? Know the basics.

CSS guide for Transforms and Transitions

CSS (Cascading Style Sheets)