Padding vs Margin of HTML
margin and padding are the two elements which are used for the spacing-out the elements in the HTML contents. Margin is the outer space of an element in HTML and padding is the inner space of the elements but both of the concepts will target the space complexity of the HTML elements. Padding and Margins are used for all set of the HTML element tags in their attributes and behaviors of them. It also recognizes ways to HTML documents like web pages should be more attractive in the user propectives.
Comparison between HTML Padding and Margin
Below are the top 6 comparisons between HTML Padding vs Margin:
Comparisons Table of HTML Padding vs Margin
| HTML Margins | HTML Padding |
|---|---|
| It also has some types top, bottom, left and right margins. | It has some different types like a top, bottom, left and right paddings. |
| It is used to declare the outer-side of the HTML contents in the web pages. | It is used to create the space inner side of the web pages in the HTML contents. |
| The margin property sets the margin areas on either top, bottom, left and right based on the values we specified in the styles or documents. | The padding property sets the padding areas for all the four-sides of the HTML elements. |
| It is also the same but similarly out of the CSS styles and some HTML contents will use the margins layout of the web pages. | It is mainly used for the CSS styles in the web pages. |
| We also use Javascript to automatically set the length of the margin in the web pages. | We can use javascript to automatically set the padding sizes in the web pages. |
Example #1 – HTML Padding
Code:
<html>
<head>
<style>
#sample {
border: 2px solid orange;
padding: 38px;
}
.sample2 {
border: 4px solid orange;
margin: 39px;
}
</style>
</head>
<body>
<div id=”sample”>Welcome to Gurukol Zone</div>
<br>
<button type=”button” onclick=”samples()
“>To My Domain</button>
<script>
function samples() {
document.getElementById(“sample”).style
.padding = “22px 23px”;
}
</script>
</body>
</html>
Output:
Example #2 – HTML Margins
Code:
<html>
<head>
<style>
#sample {
border: 2px solid orange;
margin-left: 19%;
}
.sample2 {
border: 4px solid orange;
margin-top: 14%;
}
</style>
</head>
<body>
<div id="sample">Welcome to Gurukol Zone</div>
<br>
<button type="button" onclick="samples
()">set margins</button>
<script>
function samples() {
document.getElementById("sample").style.
margin = "3%";
}
</script>
</body>
</html>
Output:
Form Attribute of HTML
HTML are provides very strong supports to build web form using the built-in element. Web form is often the most used functionality at the client-side or user ends.It is the main or parents elements from which the overall form will be designed. Then various attribute is available to design the form as a whole documents.
HTML Form Attributes
There are various attributes available to use along with the element. Lets see them by designing the simple webs form step by steps.
1. Name attribute
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<form >
First Name: <input type = "text"
name = "name" >
</form>
</div>
</body>
</html>
Output:
2. Action attribute
Code:
<div >
<form action="action.html" >
<label> First Name: </label> <br>
<input type = "text" name = "fname" > <br> <br>
<label> Last Name: </label> <br>
<input type = "text" name = "lname" > <br> <br>
<label> Email: </label> <br>
<input type = "text" name = "email" > <br> <br>
<input type = "submit" >
</form>
</div> Output:
3. Method attribute
So HTTP request can be made using various method like gets, posts, puts, delete, etc. method attributes are used to specify the method used for the submission of a form.
Example :
<form action="action.html" method="post" >
4. Value attribute
The value attributes are used on the field to set their initial values in the form. When the forms are loaded the assigned value will be displayed as defaults on the user page which can be changed by the users.
Code:
<div >
<form action="action.html" method="post" >
<label> First Name: </label> <br>
<input type = "text" name = "fname" value="Enter
first name" > <br> <br>
<label> Last Name: </label> <br>
<input type = "text" name = "lname" value="Enter
last name" > <br> <br>
<label> Email: </label> <br>
<input type = "text" name = "email" value="Enter
valid email" > <br> <br>
<input type = "submit" >
</form>
</div>
Output:
5. Autocomplete attribute
This features are available as ON by default that why we can be see the autocomplete suggestions in our previous examples. We can add this attributes in the form elements as below.
Code:
<div >
<form action="action.html" method="post" autocomplete
="off" >
<label> First Name: </label> <br>
<input type = "text" name = "fname" > <br> <br>
<label> Last Name: </label> <br>
<input type = "text" name = "lname" > <br> <br>
<label> Email: </label> <br>
<input type = "text" name = "email" > <br> <br>
<input type = "submit" >
</form>
</div> Output:
Style Tag in HTML
Overview of Style Tag in HTML
- The following articles provide an outline for Style Tags in HTML. Styles are an important factor for a Professional websites. Fonts, colors, animations, size all is necessary for the websites.
- Style tags are used for colors, image, size, background change, and animations.
- Different users have a different devices, the websites must have responded to every devices. A responsive websites in HTML are possible because of the style tags.
- The style tags used CSS properties in the HTML.
Different Types of Style Tag in Html
There is two way to use the style tags:
1. Style tag in the head section
- Style tags used in head sections of HTML using style attributes.
- CSS property used inside styles attribute.
Syntax:
<style> html-tag { property: value; } </style>
Example:
<html>
<head>
<title> Style tag in HTML 1</title>
<style>
p{
font-family: Harlow Solid Italic;
color: red;
}
</style>
</head>
<body>
<h1> Use style tag in head section </h1>
<p> HTML have own tags to make a contents meaningful.
Using HTML tags, contexts become readable and easily
to understanding. </p>
</body>
</html> Output:
Use style tag in head section
HTML have own tagd to make a contentd meaningful. Using HTML tagd, contexts become readable and easily to understanding.
2. Style tag in the body section
- Style tags used in the body parts of HTML.
- CSS properties used Insides of HTML tags using style tags.
Syntax:
<html-tag style= "property-name: value-name;" >
Example:
<!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-536869121 1107305727 33554432 0 415 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-469750017 -1073732485 9 0 511 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:8.0pt; margin-left:0cm; line-height:107%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-ansi-language:EN-IN;} pre {mso-style-priority:99; mso-style-link:"HTML Preformatted Char"; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Courier New"; mso-fareast-font-family:"Times New Roman";} span.HTMLPreformattedChar {mso-style-name:"HTML Preformatted Char"; mso-style-priority:99; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"HTML Preformatted"; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt; font-family:"Courier New"; mso-ascii-font-family:"Courier New"; mso-fareast-font-family:"Times New Roman"; mso-hansi-font-family:"Courier New"; mso-bidi-font-family:"Courier New"; mso-ansi-language:EN-US;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-ansi-language:EN-IN;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:8.0pt; line-height:107%;} @page WordSection1 {size:595.3pt 841.9pt; margin:72.0pt 72.0pt 72.0pt 72.0pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} -->
<html>
<head>
<title> Style tag in HTML 2</title>
</head>
<body>
<h1 style="color: red ;"> Use style tag in
head section </h1>
<p style="font-family: Harlow Solid Italic
;"> HTML has own tag to make content
meaningful. Using HTML tag, context become
readable and easily to understanding. </p>
</body>
</html>
Output:
Use style tag in head section
HTML has own tag to make content meaningful. Using HTML tags, context becomes readable and easily to understanding.
Examples of Style Tag in HTML
Given below are some examples of style tag:
Example #1: Style tag in the head section
Code:
<html>
<head>
<title> Style tag in HTML </title>
<style>
form{
background-color: grey;
font-size:20px;
text-align: center;
</style>
</head>
<body>
<form>
Enter full name :<br>
<input type="text" name="fullname"><br>
Enter email:<br>
<input type="email" name="email"><br>
Enter password :<br>
<input type="password" name="password"><br>
Enter gender :<br>
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<input type="radio" name="gender" value="others"/>
others
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Output:
Example #2: Style tag in the body section
Code:
<html>
<head>
<title>Background Color</title>
</head>
<body style="background-color:#616A6B;">
<h1 style="font-family:algerian;
background-color:cyan;
text-align:center;"> GuruKul Zone </h1>
<h4 style="font-family:algerian; color:yellow;
text-align:center;"> Introduction </h4>
<p style="color:red;
background-color:white;" > HTML has own tag to make
content meaningful. Using HTML tag, context become
readable and easily to understanding. </p>
<p class="text-white"> Different user has different
device, website must
have responsive with every devices. Responsive
website in html is possible because of style tag. </p>
</body>
</html> Output:
GuruKul Zone
Introduction
HTML has own tag to make content meaningful. Using HTML tag, context become readable and easily to understanding.
Different user has different device, website must have responsive with every devices. Responsive website in html is possible because of style tag.
Software Developer @SeemaRaiConsultancyServices.ltd. (React.Js) (M.C.A) [2018-2020] D.O.B: 10-Feb-1997