Powered by Blogger.

أعلان على الحاسوب

أعلان على الهاتف

سلايدشو

شروحات

مقدمه من مدونة تقني للمعلوميات

المزيد

Friday, June 8, 2018

padding-css



The padding property allows you to specify how much space should appear between the content of an element and its border −
The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.
The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties −
  • The padding-bottom specifies the bottom padding of an element.
  • The padding-top specifies the top padding of an element.
  • The padding-left specifies the left padding of an element.
  • The padding-right specifies the right padding of an element.
  • The padding serves as shorthand for the preceding properties.
Now, we will see how to use these properties with examples.

The padding-bottom Property

The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <p style="padding-bottom: 15px; border:1px solid black;">
      This is a paragraph with a specified bottom padding
      </p>
      
      <p style="padding-bottom: 5%; border:1px solid black;">
      This is another paragraph with a specified bottom padding in percent
      </p>
   </body>
   
</html>
It will produce the following result:

The padding-top Property

The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %.
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <p style="padding-top: 15px; border:1px solid black;">
      This is a paragraph with a specified top padding
      </p>
      
      <p style="padding-top: 5%; border:1px solid black;">
      This is another paragraph with a specified top padding in percent
      </p>
   </body>
   
</html>
It will produce the following result −

The padding-left Property

The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <p style="padding-left: 15px; border:1px solid black;">
      This is a paragraph with a specified left padding
      </p>
      
      <p style="padding-left: 15%; border:1px solid black;">
      This is another paragraph with a specified left padding in percent
      </p>
   </body>
   
</html>
It will produce the following result −

The padding-right Property

The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <p style="padding-right: 15px; border:1px solid black;">
      This is a paragraph with a specified right padding
      </p>
      
      <p style="padding-right: 5%; border:1px solid black;">
      This is another paragraph with a specified right padding in percent
      </p>
   </body>
   
</html>
It will produce the following result −

The Padding Property

The padding property sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %.
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <p style="padding: 15px; border:1px solid black;">
      all four padding will be 15px 
      </p> 
      
      <p style="padding:10px 2%; border:1px solid black;"> 
      top and bottom padding will be 10px, left and right
      padding will be 2% of the total width of the document. 
      </p> 
      
      <p style="padding: 10px 2% 10px; border:1px solid black;">
      top padding will be 10px, left and right padding will 
      be 2% of the total width of the document, bottom padding will be 10px
      </p> 
      
      <p style="padding: 10px 2% 10px 10px; border:1px solid black;">
      top padding will be 10px, right padding will be 2% of
      the total width of the document, bottom padding and top padding will be 10px 
      </p>
   </body>
   
</html>
It will produce the following result −
at إقرأ المزيد

CSS - Margins

The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.
The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.
We have the following properties to set an element margin.
  • The margin specifies a shorthand property for setting the margin properties in one declaration.
  • The margin-bottom specifies the bottom margin of an element.
  • The margin-top specifies the top margin of an element.
  • The margin-left specifies the left margin of an element.
  • The margin-right specifies the right margin of an element.
Now, we will see how to use these properties with examples.

The Margin Property

The margin property allows you set all of the properties for the four margins in one declaration. Here is the syntax to set margin around a paragraph −
Here is an example −
<html>
   <head>
   </head>
   
   <body>
      <p style="margin: 15px; border:1px solid black;"> 
      all four margins will be 15px 
      </p>
      
      <p style="margin:10px 2%; border:1px solid black;">
      top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. 
      </p>
      
      <p style="margin: 10px 2% -10px; border:1px solid black;">
      top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px
      </p> 
      
      <p style="margin: 10px 2% -10px auto; border:1px solid black;">
      top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser 
      </p>
   </body>
   
</html>
It will produce the following result −

The margin-bottom Property

The margin-bottom property allows you set bottom margin of an element. It can have a value in length, % or auto.
Here is an example −
<html>
   <head>
   </head>
   <body>
      <p style="margin-bottom: 15px; border:1px solid black;">
      This is a paragraph with a specified bottom margin.
      </p> 
   
      <p style="margin-bottom: 5%; border:1px solid black;"> 
      This is another paragraph with a specified bottom margin in percent
      </p>
   </body>
</html>
It will produce the following result −

The margin-top Property

The margin-top property allows you set top margin of an element. It can have a value in length, % or auto.
Here is an example −
<html>
   <head>
   </head>
   <body>
      <p style="margin-top: 15px; border:1px solid black;"> 
      This is a paragraph with a specified top margin 
      </p> 
      
      <p style="margin-top: 5%; border:1px solid black;"> 
      This is another paragraph with a specified top margin in percent 
      </p>
   </body>
</html>
It will produce the following result:

The margin-left Property

The margin-left property allows you set left margin of an element. It can have a value in length, % or auto.
Here is an example:
<html>
   <head>
   </head>
   <body>
      <p style="margin-left: 15px; border:1px solid black;"> 
      This is a paragraph with a specified left margin 
      </p> 
   
      <p style="margin-left: 5%; border:1px solid black;"> 
      This is another paragraph with a specified top margin in percent 
      </p>
   </body>
</html>
It will produce the following result −

The margin-right Property

The margin-right property allows you set right margin of an element. It can have a value in length, % or auto.
Here is an example −
<html>
   <head>
   </head>
   <body>
      <p style="margin-right: 15px; border:1px solid black;"> 
      This is a paragraph with a specified right margin 
      </p> 
      
      <p style="margin-right: 5%; border:1px solid black;"> 
      This is another paragraph with a specified right margin in percent 
      </p>
   </body>
</html>
It will produce the following result −
at إقرأ المزيد

CSS - Borders



The border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border you can change:
  • The border-color specifies the color of a border.
  • The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
  • The border-width specifies the width of a border.
Now, we will see how to use these properties with examples.

The border-color Property

The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border using the properties −
  • border-bottom-color changes the color of bottom border.
  • border-top-color changes the color of top border.
  • border-left-color changes the color of left border.
  • border-right-color changes the color of right border.
The following example shows the effect of all these properties −
<html>
   <head>
   
      <style type="text/css">
         p.example1{
            border:1px solid;
            border-bottom-color:#009900; /* Green */
            border-top-color:#FF0000;    /* Red */
            border-left-color:#330000;   /* Black */
            border-right-color:#0000CC;  /* Blue */
         }
         p.example2{
            border:1px solid;
            border-color:#009900;        /* Green */
         }
      </style>
      
   </head>
   <body>
   
      <p class="example1">
      This example is showing all borders in different colors.
      </p>
      
      <p class="example2">
      This example is showing all borders in green color only.
      </p>
      
   </body>
</html>
It will produce the following result −

The border-style Property

The border-style property allows you to select one of the following styles of border −
  • none: No border. (Equivalent of border-width:0;)
  • solid: Border is a single solid line.
  • dotted: Border is a series of dots.
  • dashed: Border is a series of short lines.
  • double: Border is two solid lines.
  • groove: Border looks as though it is carved into the page.
  • ridge: Border looks the opposite of groove.
  • inset: Border makes the box look like it is embedded in the page.
  • outset: Border makes the box look like it is coming out of the canvas.
  • hidden: Same as none, except in terms of border-conflict resolution for table elements.
You can individually change the style of the bottom, left, top, and right borders of an element using the following properties −
  • border-bottom-style changes the style of bottom border.
  • border-top-style changes the style of top border.
  • border-left-style changes the style of left border.
  • border-right-style changes the style of right border.
The following example shows all these border styles −
<html>
   <head>
   </head>
   
   <body>.
      <p style="border-width:4px; border-style:none;">
      This is a border with none width.
      </p>
      
      <p style="border-width:4px; border-style:solid;">
      This is a solid border.
      </p>
      
      <p style="border-width:4px; border-style:dashed;">
      This is a dahsed border.
      </p>
      
      <p style="border-width:4px; border-style:double;">
      This is a double border.
      </p>
      
      <p style="border-width:4px; border-style:groove;">
      This is a groove border.
      </p>
      
      <p style="border-width:4px; border-style:ridge">
      This is aridge  border.
      </p>
      
      <p style="border-width:4px; border-style:inset;">
      This is a inset border.
      </p>
      
      <p style="border-width:4px; border-style:outset;">
      This is a outset border.
      </p>
      
      <p style="border-width:4px; border-style:hidden;">
      This is a hidden border.
      </p>
      
      <p style="border-width:4px;border-top-style:solid;
      border-bottom-style:dashed; border-left-style:groove; border-right-style:double;">
      This is a a border with four different styles.
      </p>
   </body>
   
</html>
It will produce the following result −

The border-width Property −

The border-width property allows you to set the width of an element borders. The value of this property could be either a length in px, pt or cm or it should be set to thin, medium or thick.
You can individually change the width of the bottom, top, left, and right borders of an element using the following properties −
  • border-bottom-width changes the width of bottom border.
  • border-top-width changes the width of top border.
  • border-left-width changes the width of left border.
  • border-right-width changes the width of right border.
The following example shows all these border width −
<html>
   <head>
   </head>
   <body>
      <p style="border-width:4px; border-style:solid;">
      This is a solid border whose width is 4px.
      </p>
      
      <p style="border-width:4pt; border-style:solid;">
      This is a solid border whose width is 4pt.
      </p>
      
      <p style="border-width:thin; border-style:solid;">
      This is a solid border whose width is thin.
      </p>
      
      <p style="border-width:medium; border-style:solid;">
      This is a solid border whose width is medium;
      </p>
      
      <p style="border-width:thick; border-style:solid;">
      This is a solid border whose width is thick.
      </p>
      
      <p style="border-bottom-width:4px;border-top-width:10px;
      border-left-width: 2px;border-right-width:15px;border-style:solid;">
      This is a a border with four different width.
      </p>
   </body>
</html>
It will produce the following result −

Border Properties Using Shorthand

The border property allows you to specify color, style, and width of lines in one property −
The following example shows how to use all the three properties into a single property. This is the most frequently used property to set border around any element.
<html>
   <head>
   </head>
   <body>
      <p style="border:4px solid red;">
      This example is showing shorthand property for border.
      </p>
   </body>
</html>
It will produce the following result −
at إقرأ المزيد
Subscribe to: Posts ( Atom )
مساعدات تقنيه مقدمه من تقني للمعلوميات.
اسأئل الان !
730
ادا لم نرد عليك فنحن مشغولون .
2230
يوميا نساعدكم .

وصف المدونه