HTML Padding Tutorial
HyperText Markup Language (HTML) enables you to make use of padding, which creates a space between the content and the border of the element that it is assigned to. For example, if you designate padding in a table cell, the space occurs between the data and the border of the table. Using Cascading Style Sheets (CSS) in conjunction with your HTML code, you can learn how to use padding to build a better looking layout in your HTML document.
Other People Are Reading
Instructions
-
-
1
Launch the text editor application that comes with your computer and create a new page or open an existing one.
-
2
Enter a CSS style placeholder within the "<head></head>" portion of your HTML document as follows:
<head>
<style type="text/css">
</style>
</head> -
-
3
Type a selector between the "<style></style>" tags, which names the page element that you want the padding behavior to be assigned to. For example, type "body" to control your whole page, or type "p" to manage just the paragraphs. Add opening and closing curly brackets after the entry. To illustrate:
<style type="text/css">
body { }
</style> -
4
Enter "padding-top," "padding-bottom," "padding-right" and "padding-left" descriptors that name where the space occurs. Type a number value in pixels (px) after each entry. The complete code now looks as follows:
<head>
<style type="text/css">
body {padding-top: 15px; padding-bottom: 15px; padding-right: 10px; padding-left: 10px; }
</style>
</head> -
5
Save your file and launch a Web browser. Click the "Open" or "Open File" option under the browser's "File" menu to view your HTML document with the padding. Edit the numbers assigned in Step 4 to adjust the spacing if needed.
-
1
