• Let's think inside the box!
• Default margin
• Margin Collapsing
• Shorthand properties
• Width & Height
• Box Sizing
• display: none v/s visibility:hidden
• Pseudo Classes
• Pseudo Elements
• Pseudo what???
• Grouping CSS Rules

Let's think inside the box!

Every HTML element is interpreted as a box by CSS.

Every element has:

• A content; the blue area.
• A surrounding padding, the green area.
• A surrounding border, the orange area.
• A surrounding margin, the brown area.

Content
It can be some text, an image, a video...

Border
A border surrounds the content.

Padding
The internal space, from the content to the border.

Margin
The distance between an element and its next sibling.

Content, Border, Padding and Margin form part of the Box Model in CSS.

<div id="boxModel">
  Hello Box Model!
</div>

#boxModel {
  background-color: violet;
  font-size:50px;
  padding: 20px;
  border: 10px solid red;
  margin: 30px;
}

By applying this CSS Rule, below we can see how the broswer interpreted each CSS declaration.

Content| the blue area
We have a CSS declaration of font-size:50px, hence we have height of 57px

Border | the orange area
We have a CSS declaration of border: 10px solid red, therefore 10px has been allocated to the surrounding border, with a solid red colour.

Padding | the green area
We have a CSS declaration of padding: 20px;, therefore 20px has been allocated to the surrounding padding.

Margin | the brown area
And, we have a CSS declaration of margin: 30px;, therefore 30px has been allocated to the surrounding margin.

Default margin

By the browser

The browser by default assigns a margin: 8px; to the body element.

To remove this default margin, we can use this CSS rule:

body {
  margin: 0px;
}

Margin Collapsing

When we have two or more HTML elements (block element).
The margin between them collapse. This is done automatically by the browser to minimise excessive white spacing.

Below we can see that the margin-bottom for the first element and the margin-top for the second element has automatically been merged together.

By default, the block element with the bigger margin wins.
Below, the margin-top for the second element has a bigger value than the margin-bottom of the first element.

Read more:

• Mastering margin collapsing

Shorthand properties

Shorthand properties combine values of multiple properties in a single CSS declaration.

For example:

margin: 8px

is a shorthand for

margin-top: 8px;
margin-right: 8px;
margin-left: 8px;
margin-bottom: 8px;

Shorthand makes it easier to pass in multiple values to one CSS property.

border: 10px dashed purple;

Shorthand properties in action

padding: 10px 20px; is a short hand for:

padding-top:    10px;
padding-right:  20px;
padding-bottom: 10px;
padding-left:   20px;

padding: 10px 20px 30px; is a short hand for:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;

padding: 10px 20px 30px 40px; is a short hand for:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Width & Height

Width

A block-level element always attempts to take the full available width of the browser or that of its enclosing element if it has one.

div {
  background: greenyellow;
}

  <div>What is my width?</div>

If we set the width by giving it a percentage value, it'll take the percentage of the surrounding element.
In this case, the div element has no surrounding element, so it is taking the full available space of the browser's width.

div {
  background: greenyellow;
  width: 33%
}

If we wrap the div in an enclosing section element, and we give that section element a specific width.

<section>
  <div>What is my width?</div>
</section>

section {
   width: 500px; 
   background: yellow;
}
div {
  background: greenyellow;
  width: 33%
}

The width of the div element will now be a % of its enclosing element.
Below, we can see that it has shrunk smaller.

Height

Height on the otherhand, sets the maximum vertical space an element needs to fit its content. It doesn't take the full height available for the broswer by default.

div {
  background: greenyellow;
  width: 100%;
  height: 100%;
}

If the html element is enclosed inside another element, its height will be relative to that element.

<section>
  <div>What is my height?</div>
</section>

section {
   width: 500px; 
   background: yellow;
   width: 200px;
   height: 200px;
}

div {
  background: greenyellow;
  width: 80%;
  height: 100%;
}

To make use the full height of the browser, one trick is to apply this CSS rule:

html, body {
    height: 100%
    }

Box Sizing

box-sizing property allows us to include the padding and border in an element's total width and height.
But before that, let's understand how the browser allocates the space for each element.

Actual visible/rendered width of an element’s box
= width + padding + border

Actual visible/rendered height of an element’s box
= height + padding + border

By default, margin, border & padding are given their respective spacing.

<div>How much space do I use?</div>

div {
  background: pink;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  border: 10px solid greenyellow;
}

We can change the box model by assigning the box-sizing property one of the three possible values

1. content-box
2. padding-box
3. border-box (the most popular value)

Example with box-sizing: border-box;

div {
  background: pink;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  border: 10px solid greenyellow;
  box-sizing: border-box;
}

box-sizing Reset Method

If we want to use border-box throughout our project, the following styling will do the quick fix.

html  {  
    box-sizing: border-box;  
}  
*, *:before, *:after  {  
    box-sizing: inherit;  
}

Further reading:

• Box Sizing

Display Property

Block element
A block element is any element that starts a new line, like a paragraph, and uses the full width (all the available horizontal space) of the page or container. A block element can take up one line or multiple lines and has a line break before and after the element. We can set its margin-top and margin-bottom.

Examples of block-level elements :

The display property allows us to change the behaviour of an element to block, inline, or inline-block.

Inline Element
Inline as the name says “included as a part of the main text and not as a separate section”. Inline elements occupy the space as needed within the space defined by the main element, that is, they take up space they require to fit their content in. Unlike block-level elements, they do not begin on new lines. Therefore, two inline-elements can fit into the same line (as long as the combined content doesn't take up the entire space in which case a line break would be added). Setting a width or height on an inline element also has no effect.

Examples of inline elements:

Inline-block
An inline-block remains inline with all text around the element and appears the same as an inline element.
The advantage: we get the ability to have the vertical height for that element, so we can set margin-top, margin-bottom, padding-top, padding-bottom and vertical-align.

Further Reading

• MDN Display

display: none v/s visibility:hidden

The CSS declaration display: none; removes the element from the document flow. This means that the element is no more visible and it also doesn't "block its position". Other elements can (and will) take its place instead.

The CSS declaration visibility: hidden; hides an element but keeps its place in the document. This means other elements won't fill its spot.

For example, if we have two div elements, one with display none and next one with visibilty hidden:

<section>
<div class="dnone">Display None</div>
</section>
<br>
<section>
<div class="vhidden">Visibility Hidden</div>
</section>

section {
  border: 1px solid red;
}
.dnone {
    display: none;
    height: 50px;
}

.vhidden{
    visibility: hidden;
    height: 50px;
}

The first div with CSS declaration display: none; has been removed entirely from the document flow.

Pseudo Classes

Pseudo Classes select elements under certain conditions:

• when their position is relative to their siblings.
• or when they’re under a particular state.

Example of common pseudo-classes:

Dynamic pseudo-classes

• :link
• :visited
• :hover
• :active
• :focus

UI element states pseudo-classes

• :enabled
• :disabled
• :checked

Structural pseudo-classes

• :first-child
• :nth-child(n)
• :nth-last-child(n)
• :nth-of-type(n)
• :nth-last-of-type(n)
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :root
• :empty

Other pseudo-classes

• :not(x)
• :target
• :lang(language)

Pseudo Elements

Pseudo-elements effectively create new elements that are not specified in the markup of the document and can be manipulated much like a regular element.

• ::before
• ::after
• ::first-letter
• ::first-line

p::first-letter {
  color: Red;
  font-size: 25px;
  font-weight: bolder;
}

p::after {
  content: "<-- Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Pseudo what???

The difference between pseudo-classes and pseudo-elements can be a little confusing at first.
A pseudo-class is a selector that assists in the selection of something that cannot be expressed by a simple selector, for example :hover. Since :hover is an action.
A pseudo-element, on the other hand, allows us to create items that do not normally exist in the document tree, for example ::after.

So a pseudo-class selects, while a pseudo-element creates.

Grouping CSS Rules

If we have two CSS rules which share the same CSS declarations, we can group the rules separated by a ,.
Here, the , does not act as a combinator.

div:first-letter,
p::first-letter {
  font-family: sans-serif;
  font-weight: bold;
  color: orange;
  font-size: 30px;
}

How can I improve?

Thank you for reading this article. 🙏 🙏 🙏
Can you kindly tell me what I might have missed out, and how I can improve this article?
Thank you.

Motivate me to write more

🙏