margin- It gives the space around outside the element.
the below example is the same for margin.
Padding- It gives space around inside the element.
/* padding */
p{
/* top->left->bootom->right */
padding: 20px;
/* top-bottom -> left-right */
padding: 20px 10px;
/* top-> left-right->bottom */
padding: 20px 10px 30px;
/* indivisaul */
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
/* auto */
padding: auto;
}
fonts-There are some methods in CSS to design fonts.
/* font */
p{
/* font color not supported */
/* " genric" types */
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
font-variant: small-caps;
font-weight: 300;
}
text-There are some methods in CSS to design text.
/*text */
p{
/* text color */
color: aliceblue;
/* text-allignment */
/* give margin to left and right */
text-align: justify;
text-transform: lowercase;
text-decoration: underline;
/* for last line */
text-align-last: left;
letter-spacing: 10px;
word-spacing: 10px;
line-height: 10px;
/* it gives first line margin from right */
text-indent: 10px;
/* direction */
/* urdu */
direction: ltr;
}
max-height- it is the maximum height to give the browser.
min-height- it is the minimum height to give the browser.
max-width- it is the maximum width to give the browser.
min-width- it is the minimum width to give the browser.
/* height and width */
p{
height: 10px;
max-height: 29px;
min-height: 290px;
box-sizing: border-box;
}
display property- it is proper to how to display an element in the web browser.
/* display property */
p{
/* span is inline */
display: block;
/* p is block */
display: inline;
/* it is use to give the width */
display: inline-block;
display: hidden;
display: none;
}
Box model- it is the model to understand the margin, padding, and border
in the box model, there is some space around inside the element this space is called padding and after padding a border and then some space around the outside of the element is called a margin.
