Day 87/100 The Box Model

Understanding how to position a particular object creates a notion of the figure of a box that would guide and interpret the entire concept as functional modern design.

The box model comprises the set of properties that define parts of an element that take up space on a web page. The model includes the content area’s size (width and height) and the element’s padding, border, and margin. The properties include:

1. width and height: The width and height of the content area.
2. padding: The amount of space between the content area and the border.
3. border: The thickness and style of the border surrounding the content area and padding.
4. margin: The amount of space between the border and the outside edge of the element.

Code Snippets

.card {
  border: 2px solid #9DD1F1;
  display: inline-block;
  height: 200px;
  margin-top: 4px;
  padding: 30px auto;
  text-align: center;
  width: 215px;
  transition: all 200ms ease;
  cursor: pointer;
}

.card:hover {
  background-color: #004E89;
  border-color: #004E89;
}

.card img {
  padding-top: 40px;
}

a11y myths

Accessibility only helps people with disabilities

Fortunately it helps everyone. It's a known fact that applying accessibility principles improves overall user experience and makes a website more convenient to use.