Padding vs Margin ,Form Attribute and Style Tag of HTML

 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 MarginsHTML 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:

Welcome to Gurukol Zone

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:
Welcome to Gurukol Zone

 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:

 
First Name:

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:
Style tag in HTML
Enter full name :

Enter email:

Enter password :

Enter gender :
Male Female others
Enter your Address:

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:
Background Color

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.