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.

Made with Slides.com