Shorthand properties are Css properties that let you set the values of multiple other Css properties simultaneously. Using a shorthand property, makes your code more readable and saves time.
For instance, the Css background property is a shorthand property that’s able to define the values of background-color, background-image, background-repeat, and background-position
Background properties
1background-image: url(img/some.gif);
2background-repeat: repeat-x;
3background-position: right top;
4background-color: #6c757d;
5
6/* above 4 declarations can be shortened to just one like below; */
7background: url(img/some.gif) repeat-x right top #6c757d;
Margin properties
1margin-top: 10px;
2margin-right: 20px;
3margin-bottom: 30px;
4margin-left: 40px;
5
6/* above 4 declarations can be shortened to just one like below; */
7margin: 10px 20px 30px 40px;
Padding properties
1padding-top: 10px;
2padding-right: 20px;
3padding-bottom: 30px;
4padding-left: 40px;
5
6/* above 4 declarations can be shortened to just one like below; */
7padding: 10px 20px 30px 40px;
Border properties
1border-width: 5px;
2border-color: #e4e6eb;
3border-style: dotted;
4
5/* above 3 declarations can be shortened to just one like below; */
6border: 5px #e4e6eb dotted;
Font properties
1font-size: 1.3em;
2font-weight: lighter;
3line-height: 3;
4font-style: normal;
5font-family: Arial, sans-serif;
6
7/* above 5 declarations can be shortened to just one like below; */
8font: normal lighter 1.3em/3 Arial, sans-serif;