EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials Top Differences Tutorial HTML Padding vs Margin
Secondary Sidebar
HTML Tutorial
  • Attributes
    • HTML Attributes
    • HTML Event Attributes
    • HTML Required Attribute
    • HTML Style Attribute
    • HTML Text Attributes
    • HTML Block Elements
    • HTML Inline-Block
    • Block Level Elements in HTML
    • HTML Form Attribute
    • HTML Padding vs Margin
  • Basic
    • Introduction to HTML
    • What is HTML
    • HTML stands for
    • Advantages of HTML
    • Applications of HTML
    • Career In HTML
    • How HTML Works
    • Versions of Html
    • Symbols in HTML
    • HTML Commands
    • HTML Events
    • HTML Fonts Styles
    • HTML Form Controls
    • HTML Form Elements
    • HTML Frames
    • HTML Layout
    • Dataset in HTML
    • HTML Entities
    • HTML List Styles
    • HTML Style Sheets
    • HTML Text Formatting Tags
    • What is XHTML?
    • HTML Section vs Div
    • DHTML
    • Cheat Sheet HTML
  • Tags
    • Types of Tags in HTML
    • Basic HTML Tags
    • HTML Format Tags
    • HTML object Tag
    • HTML Image Tags
    • HTML Table Tags
    • Meta Tag in HTML
    • Caption Tag in HTML
    • Aside Tag in HTML
    • Style Tag in HTML
    • Cite Tag in HTML
    • HTML Legend Tag
    • Quotation Tag in HTML
    • Datalist in HTML
    • map Tag in HTML
    • HTML Marquee Tag
    • Footer Tag in HTML
    • HTML nav Tag
    • Html Nav Element
    • HTML figure Tag
    • Option Tag in HTML
    • Inline Tags in HTML
    • Pre Tag in HTML
    • Span Tag in HTML
    • HTML samp Tag
    • SUP Tag in HTML
    • Div Tag in HTML
    • HTML tr Tag
    • HTML abbr Tag
    • HTML Address Tag
    • Small Tag in HTML
    • PHP Tag in HTML
    • Canvas Tag in HTML
    • Font Tag in HTML
    • Select Tag in HTML
    • HTML Picture Tag
    • Fieldset Tag in HTML
    • HTML Code Tag
    • kbd Tag in HTML
    • TextArea Tag in HTML
    • HTML Article Tag
    • HTML Button Tag
    • HTML time Tag
    • THead Tag in HTML
    • HTML frameset Tag
    • HTML checkbox Tag
    • Address Tag in HTML
    • Area Tag in HTML
    • HTML Strike Tag
    • HTML section Tag
    • HTML Umlaute
    • Frame Tag in HTML
    • tfoot in HTML
    • Embed Tag in HTML
    • href tag in HTML
    • Alt Tag in HTML
    • HTML Audio Tag
  • Color
    • HTML Colors
    • RGB Color Model
    • Color Name in HTML
    • HTML Color Picker
    • Scrollbar Color
  • HTML5
    • What is HTML5
    • HTML5 Elements
    • Html5 New Elements
    • HTML5 Tags
    • HTML5 Semantics
    • HTML5 Web Workers
    • HTML5 Semantic Elements
  • Advance
    • Create Tables in HTML
    • HTML Server-Sent Event
    • Drag and Drop?in HTML
    • Dropdown List in HTML
    • Anchor in HTML
    • HTML Align Center
    • HTML Display Block
    • HTML Blocks
    • UTF-8 in HTML
    • HTML Canvas
    • HTML SVG
    • HTML Text Editors
    • HTML Text Link
    • HTML Text Decoration
    • HTML URL Encoding
    • Iframes in HTML
    • HTML Tooltip
    • HTML Reset Button
    • HTML Google Maps
    • HTML Hide Element
    • Image Link in HTML
    • Web Templates HTML
    • HTML Ordered List
    • HTML Unordered List
    • HTML Description List
    • HTML Form Validation
    • HTML Form Action
    • Registration Form in HTML
    • HTML Justify Text
    • Date in HTML
    • Vertical Table HTML
    • Horizontal Menu Bar in HTML
    • DOCTYPE HTML
    • Moving Text in HTML
    • Scrollbar in HTML Table
    • Responsive in HTML
    • HTML Inline-Style
    • HTML Progress Bar
    • HTML Colspan
    • HTML Favicon
    • HTML margin-left
    • Combobox in HTML
    • HTML Table Background
    • Table Without Border in HTML
    • Nested Table in HTML
    • Table Border in HTML
    • HTML onclick Button
    • HTML Image Padding
    • HTML Padding
    • HTML Border Style
    • HTML Float Left
    • File Path in HTML
    • HTML Geolocation
    • Linking Pages in HTML
    • Embed PHP in HTML
    • How to Add CSS in HTML?
    • Custom Html Element
    • Design Web Page in HTML
    • HTML Schriftart
    • Cursor in HTML
    • HTML Form Input Type
    • HTML Input Placeholder
    • HTML Table Layout
    • Scrollbar in HTML
    • Jsoup Example
    • HTML Sonderzeichen
    • HTML Search Bar
  • Interview Questions
    • HTML interview Questions
    • HTML5 Interview Questions And Answers

Related Courses

Online HTML Course

Bootstrap Training Course

XML Training Course

CSS Training Course

HTML Padding vs Margin

By Sivaraman VSivaraman V

HTML Padding vs Margin

Difference Between HTML Padding and Margin

In HTML, margin and padding are the two elements that are used for spacing-out the elements in the HTML contents. Margin is the outer space of an element in HTML, and padding is the elements’ inner space, but both of the concepts will target the space complexity of the HTML elements. Padding and Margins are used for all sets of the HTML element tags in their attributes and behaviours. It also recognizes ways to HTML documents like web pages should be more attractive from the user propectives. Both of the elements have their own similarities and advantages; disadvantages will be discussed below concepts.

Head to Head Comparison between HTML Padding and  Margin (Infographics)

Below are the top 6 comparisons between HTML Padding vs Margin:

HTML Padding vs Margin info

Key differences between HTML Padding and Margin

Let us discuss some key differences between HTML Padding vs Margin in the following points:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

  • Html padding and margins are the two properties associated with space and also the borders in the HTML elements. Both padding and margins are used for CSS styles also; when we use CSS styles in both of the attributes, they will have their own behaviours.
  • Padding is used for creating the space for the inner side of all HTML elements based on the user requirement if they needed for which elements associated with the padding attribute in HTML. Margin also the same thing in padding but space is on the outer side of the documents for the web pages based on the user specifications.
  • Margin has different types like a top, bottom, left, and right if we specified the HTML documents’ margin types. If we use CSS styles in the HTML margin and padding, they will be more powerful in the web pages.
  • If we set the HTML margin-top value at the top of the elements, it should be specified with the length or the percentage. The child values specify and refer to the parent elements width, eight of the HTML contents. F we use padding in HTML, they have a different set of types like cell padding,cell-spacing in the HTML table features.
  • If we set the cell-padding and cell-spacing values in the HTML tables, it will specify both horizontal and vertical spaces for the tables’ CSS property. Sometimes cell-spacing property is not working with the Internet Explorer version like 7,8,9 etc.; it will be a user-compatibility mode if we use border-spacing attribute when compared to cell-spacing the value also mentioned as null value and also if needs other possible values it will more helpful for the cell spacing attributes.
  • We can mention that the attribute values like in the HTML table are the basic example of cell spacing,border-spacing, and border-collapse; these are the same attributes that we use in the HTML tables for more attractively in the front end.
  • Based on that, we also mention the padding space and margin space also in the same HTML tables. We also use <div> tag is the predefined tag in HTML, but we use padding space and margin space in the nested div tags also if possible in the user screens.
  • When we use div tag in HTML tables, we wrap the data in the table cells, but when we declared the padding space, margin space in the div tag of the HTML table, each and every table cell of the column get a uniform or it should be an ascending order format in the front end screens.

Comparison Table of HTML Padding vs Margin

The table below summarizes the comparisons between HTML Padding vs Margin:

HTML Padding HTML Margins
It is used to create the space inner side of the web pages in the HTML contents. It is used to declare the outer-side of the HTML contents in the web pages.
It has some different types like a top, bottom, left and right paddings. It also has some types top, bottom, left and right margins.
It is mainly used for the CSS styles in the web pages. 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 co-ordinates and combines with the other HTML tags, which help in their attributes and behaviour of the HTML web pages. It also, combines with the other HTML tags, helped in their attributes and behaviours of the HTML web pages.
The padding property sets the padding areas for all the four-sides of the HTML elements. The margin property sets the margin areas on either top, bottom, left and right based on the values we specified in the styles of documents.
We can use javascript to automatically set the padding sizes in the web pages. We also use Javascript to automatically set the length of the margin in the web pages.

Examples for HTML Padding & HTML Margins

Below are the examples for HTML Padding & HTML Margins:

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

HTML Padding - Output 1

HTML Padding - Output 2

In the above example, we use javascript to automatically set the padding sizes in the web pages; we click the “to mydomain” icon; it will arrange the padding size.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,754 ratings)

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</div>
<br>
<button type="button" onclick="samples()">set margins</button>
<script>
function samples() {
document.getElementById("sample").style.margin = "3%";
}
</script>
</body>
</html>

Output:

JavaScript Function

JavaScript Function

In the same above example, we use the javascript function to set the margin values when we click the button automatically.

Conclusion

The HTML padding and margins are mainly used for the web pages should be more attractively and some formal styles in the front end panel. It will focus on the professional content that should be flexible, and also, it will plot the user input values to be aligned in the backend and front end in a proper manner. The javascript and some other frameworks like bootstrap and jquery libraries combine with these HTML elements.

Recommended Articles

This is a guide to HTML Padding vs Margin. Here we also discuss the top key differences with infographics and comparison table. You may also have a look at the following articles to learn more –

  1. HTML Frames
  2. HTML Layout
  3. HTML margin-left
  4. HTML Padding
Popular Course in this category
HTML Training (13 Courses, 20+ Projects, 4 Quizzes)
  13 Online Courses |  20 Hands-on Projects |  100+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course

Related Courses

Java Training (41 Courses, 29 Projects, 4 Quizzes)4.9
Python Certifications Training Program (40 Courses, 13+ Projects)4.8
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more