This article will cover the concept of border-box.

What are the basic things a CSS dev has to keep in mind when creating boxes in CSS?

Here are some important properties a developer has to keep in mind while creating boxes in CSS:

Border:

A border will provide an outline of an HTML element. There are multiple border properties which will be explored below:

• border-width: Specifies the thickness of the border.

  • : A numeric value measured in px, em, rem, vh and vw units.

  • thin: The equivalent of 1px

  • medium: The equivalent of 3px

  • thick: The equivalent of 5px

• border-style: Specifies the type of line drawn around the element, including:

  • solid: A solid, continuous line.

  • none (default): No line is drawn.

  • hidden: A line is drawn, but not visible. this can be handy for adding a little extra width to an element without displaying a border.

  • dashed: A line that consists of dashes.

  • dotted: A line that consists of dots.

  • double: Two lines are drawn around the element.

  • groove: Adds a bevel based on the colour value in a way that makes the element appear pressed into the document.

  • ridge: Similar to groove, but reverses the colour values in a way that makes the element appear raised.

  • inset: Adds a split tone to the line that makes the element appear slightly depressed.

  • outset: Similar to inset, but reverses the colours in a way that makes the element appear slightly raised.

• border-colour: Specifies the colour of the border and accepts all valid colour values.

The syntax for adding a border is :

border: <line-width> || <line-style> || <color>

The CSS box model is a set of rules that help dictate how items are displayed within your website or web project. It defines the parameters of elements, their boundaries, and space both in and outside the target element.

The CSS Box Model is a term used for the container that wraps the following element properties within it.

• Content

• Padding

• Border

• Margin

1. Content:

Content can be defined as the innermost part of this box model content can contain anything including other HTML elements or any text.

2.Padding:

Padding is the space between the border and the content of an element. Padding is important in web design because it helps make content more visible and readable.

An element's padding can be defined with the following properties: padding-top, padding-bottom, padding-left, padding-right, or shorthand property padding.

selector{ 
padding-top:10px;
padding-right:10px;
padding-bottom:10px; 
padding-left:10px; 

 }
 by shorthand property:-(padding-top,padding-right,padding-bottom,padding-left)

selector{
 padding:10px 10px 10px 10px; 
}

3.Border:

The border property lets us add and style a line around the content padding area. This line's thickness, colour, and style can be defined by the border width, border colour, and border-style properties, or you can use the shorthand border property to define all three. Border-style values include solid, dotted, dashed, double, groove, ridge, and none.

selector{

border-width:2px;
border-style:solid;
border-color :red;
}

by short-hand property:-( border-width, border-style ,border-color )

selector{
 border: 2px solid red;
 }

4.Margin:

The margin is the space separating the element from its neighbours and the outermost layer of the CSS box model. Its dimensions are the margin-box width and the margin-box height.

Its size can be defined by the following properties: the margin-left, margin-right, margin-top, and margin-bottom properties, or the shorthand margin property.

If you'd like to set different amounts of padding, then you can use the long-form method.

selector { 
margin-top: 10px; 
margin-bottom: 10px; 
margin-left: 10px; 
margin-right: 10px; 
} 

by using shorthand property:-(margin-top , margin-right ,margin-bottom ,margin-left)

selector {
 margin: 10px 7px 9px 8px; 
}