Web Design Tutorial Css part-15 CSS - Paddings

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 wordinherit. 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 −

Web Design Tutorial CSS part 14 - Lists

Lists are very helpful in conveying a set of either numbered or bullet points. This chapter teaches you how to control list type, position, style, etc., using CSS.

We have the following five CSS properties, which can be used to control lists:

The list-style-type allows you to control the shape or appearance of the marker.
The list-style-position specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker.
The list-style-image specifies an image for the marker rather than a bullet point or number.
The list-style serves as shorthand for the preceding properties.
The marker-offset specifies the distance between a marker and the text in the list.

Now, we will see how to use these properties with examples.

The list-style-type Property

The list-style-type property allows you to control the shape or style of bullet point (also known as a marker) in the case of unordered lists and the style of numbering characters in ordered lists.

Here are the values which can be used for an unordered list −

Value	Description
none	NA
disc (default)	A filled-in circle
circle	An empty circle
square	A filled-in square

Here are the values, which can be used for an ordered list −

Value	Description	Example
decimal	Number	1,2,3,4,5
decimal-leading-zero	0 before the number	01, 02, 03, 04, 05
lower-alpha	Lowercase alphanumeric characters	a, b, c, d, e
upper-alpha	Uppercase alphanumeric characters	A, B, C, D, E
lower-roman	Lowercase Roman numerals	i, ii, iii, iv, v
upper-roman	Uppercase Roman numerals	I, II, III, IV, V
lower-greek	The marker is lower-greek	alpha, beta, gamma
lower-latin	The marker is lower-latin	a, b, c, d, e
upper-latin	The marker is upper-latin	A, B, C, D, E
hebrew	The marker is traditional Hebrew numbering
armenian	The marker is traditional Armenian numbering
georgian	The marker is traditional Georgian numbering
cjk-ideographic	The marker is plain ideographic numbers
hiragana	The marker is hiragana	a, i, u, e, o, ka, ki
katakana	The marker is katakana	A, I, U, E, O, KA, KI
hiragana-iroha	The marker is hiragana-iroha	i, ro, ha, ni, ho, he, to
katakana-iroha	The marker is katakana-iroha	I, RO, HA, NI, HO, HE, TO

Here is an example −

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style="list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

It will produce the following result −

The list-style-position Property

The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points. It can have one the two values −

Value	Description
none	NA
inside	If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.
outside	If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

Here is an example −

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style-type:circle; list-style-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style="list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style-type:decimal;list-style-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

It will produce the following result −

The list-style-image Property

The list-style-image allows you to specify an image so that you can use your own bullet style. The syntax is similar to the background-image property with the letters url starting the value of the property followed by the URL in brackets. If it does not find the given image then default bullets are used.

Here is an example −

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style="list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style="list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

It will produce the following result −

The list-style Property

The list-style allows you to specify all the list properties into a single expression. These properties can appear in any order.

Here is an example −

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

It will produce the following result −

The marker-offset Property

The marker-offset property allows you to specify the distance between the marker and the text relating to that marker. Its value should be a length as shown in the following example −

Unfortunately, this property is not supported in IE 6 or Netscape 7.

Here is an example −

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

It will produce the following result −

Featured post

How to get 1000 up Visitor per video on your Youtube channel Make Money part 2