
Box Model In CSS: Margin, Border, Padding & Content

-
Margin
(Outline and Shadows), -
Border,
-
Padding,
-
Content

The box model includes:


The box model includes:
box-sizing:
- border-box - the width and height of box are applied to content only, padding and border are part of it
- content-box - the width and height of box are applied to content only, padding and border are not part of it

Margin and Padding in CSS:
.demo {
width: 100px;
height: 100px;
border: 1px solid red;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
/* margin shorthand */
margin: 5px 5px 5px 5px;
margin: 5px 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
/* padding shorthand */
padding: 5px 5px 5px 5px;
padding: 5px 5px;
}

D.I.Y


D.I.Y

CSS In Too Depth

the width is applied on inline side - block flow,
the height is applied on block side - inline flow


D.I.Y
borders:
.demo {
width: 100px;
height: 100px;\
border-width: thin; /* thin, medium, thick, 10px */
border-style: solid; /* dotted, dashed, solid, double, groove, ridge, inset, outset */
border-color: yellow; /* any colour in any unit*/
/* border shorthand */
border: 1px solid red;
}


D.I.Y
border radius:
.border {
width: 100px;
height: 100px;
/* border shorthand
border: 2px solid red;
*/
border-radius: 1em; /* 1em = 16px */


D.I.Y
Border Radius in Too Depth:
.border {
width: 100px;
height: 100px;
/*
* border-radius: 1em;
*
* border-radius: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
*
*
* border-top-left-radius: border-top-left-top-radius border-top-left-left-radius;
* border-top-right-radius: border-top-right-top-radius border-top-right-right-radius;
* border-bottom-right-radius: border-bottom-right-bottom-radius border-bottom-right-right-radius;
* border-bottom-left-radius: border-bottom-left-bottom-radius border-bottom-left-left-radius;
*
* can be used for creating blobs
* shorthand:
*/
border-radius: 1em 2em 3em 4em;
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}


D.I.Y
Border Radius Image:
.border {
width: 100px;
height: 100px;
border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
border-image-slice: 61 58 51 48; /* top right bottom left*/
border-image-width: 20px 20px 20px 20px; /* top right bottom left*/
border-image-outset: 0px 0px 0px 0px; /* top right bottom left: distance between your border image and the box that it wraps around*/
border-image-repeat: stretch stretch;
}

D.I.Y
-
Create an image card with rounded borders


D.I.Y

-
Create an image card with rounded borders 3 elliptical and 1 rounded border like in the website.

CSS: Box Model
By Yash Priyam
CSS: Box Model
- 274