I bet this is a common problem to novice CSS coders, when you accidentally override CSS properties by using shorthand properties. When I just started doing CSS, I stumbled upon this problem that I thought was a “bug” with many different CSS properties like padding, font and especially background. Here is a simple code example to show how this can happen:

	.container {
		padding-top:25px;
		padding-bottom:40px;
		padding:25px;  /* this shorthand CSS property will override all padding properties above and set all padding directions to 25px */
	}

To prevent this from happening, you can use shorthand the CSS property first, followed by any specific CSS properties you want. For example:

	.container {
		padding:25px; 
		padding-bottom:40px;
	}

Hit the button below to see more examples at CSS Tricks.

View More