KandZ – Tuts

We like to help…!

CSS 💻 17 – margin, padding and border properties

a - margin property
margin → specifies the space around an element
You can specify 1 value for each side(top, right, bottom, and left), 1 value for all sides...
2 values 1st for top & bottom and 2nd left & right and
3 values 1st for top, 2nd for left & right and 3rd for bottom
You can also specify each side separately with margin-top|right|bottom|left
values → length, percentage and auto(selects the suitable margin to use)
margin: 20px; → Set all four margins to 20 pixels
margin-top: 10px; → sets top margin margin-right: 20px; → sets right margin
margin-bottom: 30px; → sets bottom margin margin-left: 40px; → sets left margin

b - padding property
padding → specifies the space between border and the element content
You can specify 1 value for each side(top, right, bottom, and left), 1 value for all sides...
2 values 1st for top & bottom and 2nd left & right and...
3 values 1st for top, 2nd for left & right and 3rd for bottom
You can also specify each side separately with padding-top|right|bottom|left
values → length and percentage
padding: 20px; → Set all four paddings to 20 pixels
padding-top: 10px; → sets top padding padding-right: 20px; → sets right padding
padding-bottom: 30px; → sets bottom padding padding-left: 40px; → sets left padding

c - border property
border → is a shorthand property for border-width, border-style and border-color. It is used to set a border to all 4 sides
1st value is the width, 2nd the style and 3rd the color
You can specify one of the three values if you need to
You can also specify each side separately with border-top|right|bottom|left
width values → thin, medium and thick keyword and length values
style values → none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset
color values → color keywords, hexadecimal values, rgb(a) abd hsl(a) values
border: 1px solid #000; → Set a solid black border with width of 1px
border: 2px dashed red; → Set a dashed red border with width of 2px

Leave a Reply