BOX MODEL (Border, Margin, Padding)

Border:

The border is simply nothing but a property of the CSS. it sets the border to the elements,

Like border-width ,border-style,& border-color.

Border-style properties:

  • dotted - Defines a dotted border

  • dashed - Defines a dashed border

  • solid - Defines a solid border

  • double - Defines a double border

  • groove - Defines a 3D grooved border. The effect depends on the border-color value

  • ridge - Defines a 3D ridged border. The result depends on the border-color value

  • inset - Defines a 3D inset border. The outcome depends on the border-color value

  • outset - Defines a 3D outset border. The outcome depends on the border-color value

  • none - no borders required

  • hidden - a hidden border

These are the border-style properties but also use border to use the width, style, and color at the same time.

As you see that I applied the border: 2px solid black .it combines width, style, and color, or use separately as I used for the fourth element as shown in the picture.

We also use each side of the border (top, right, bottom, left).at each side we use different styles also

border-top-style:dashed;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: solid;

Margin

The margin properties are used to create space around elements, outside of any defined borders.

We can apply margins around selected elements using the value of (top, right, bottom, left)

All the margin properties can have the following values:

  • auto - the browser calculates the margin

  • length - specifies a margin in px, pt, cm, etc.

  • % - specifies a margin in % of the width of the containing element

  • inherit - specifies that the margin should be inherited from the parent element

We can use the shorthand property like margin:20px 30px 40px 20px or we can use it separately.

If the margin property has two values margin:20px 40px; then the first value should be top & bottom and the second value should be left & right. we can use a single value also it affects all sides.

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

Padding:

The padding properties are used to create space around elements, inside of any defined borders.

We can apply margins around selected elements using the value of (top, right, bottom, left)

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

using these properties we can create space inside the given border.

If the padding property has two values padding:20px 40px; then the first value should be top & bottom and the second value should be left & right. we can use a single value also it affects all sides.

Height/width:

The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

Box model:

The box model is a box that wraps around the HTML elements .it consists of padding, margin, border, and content

As shown in the image. the content should be anything text, images, links, etc. we have to apply padding, border, then margin to complete the box model.

  • Content - The content of the box, where text and images appear

  • Padding - Clears an area around the content. The padding is transparent

  • Border - A border that goes around the padding and content

  • Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

References: