HTML element: Padding

The padding adds space between the content of the HTML element (for example within the paragraph element the text itself is the content) and the border (remember border property)

We can set equal padding value to all the four sides at once by just calling.

padding

or we can independently configure each side:

padding-top
padding-right
padding-bottom
padding-left

Let's look at an example, page.html:

<!DOCTYPE html>
<html>

<head>
    <title>Problem</title>
    <meta charset="UTF-8">
    <link rel="StyleSheet" href="styles.css" type="text/css">
</head>

<body>
 <pre class="sourcecode">
public class Rectangle{
  //attributes
  int tall;
  int width;
  boolean padding;

  //methods
  public int returnArea(){
    return height*width;
  }

  public void fill(boolean r){
    padding=r;
  }

  public void changeSize(int an, int al){
    width=w;
    high=al;
  }

  public Rectangle() { //constructor
    high=20;
    width=10;
    padding=false;
  }
}//end Rectangle class
</pre>
</body>

</html>

The styles.css file is:

.sourcecode {
  font-size:12px;
  background-color:#ffffcc;
  border-width:1px;
  border-style:dotted;
  border-color:#ffaa00;

  padding:20px;
}

output

We have 20px of separation between the border and the content of the pre element.

With the HTML element "pre", the spaces and carriage returns that we have put in the source code are respected. This text style is very suitable when we want to show the source code of a program.

Robort Gabriel

Lagos, Nigeria

Skills