Skip to content
geeksforgeeks
  • Tutorials
    • Python
    • Java
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
    • Practice Coding Problems
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • HTML Tutorial
  • HTML Exercises
  • HTML Tags
  • HTML Attributes
  • Global Attributes
  • Event Attributes
  • HTML Interview Questions
  • HTML DOM
  • DOM Audio/Video
  • HTML 5
  • HTML Examples
  • Color Picker
  • A to Z Guide
  • HTML Formatter
Open In App

HTML | DOM Style letterSpacing Property

Last Updated : 08 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

The Style letterSpacing property in HTML DOM is used to set the space between the characters. This property allows to set the required space between characters and also used to returns the space between characters. 

Syntax:

  • It returns the letterSpacing property.
object.style.letterSpacing
  • It used to set the letterSpacing property.
object.style.letterSpacing = "normal|length|initial|inherit"

Property Values:

  • normal: The normal spacing for the current font i.e no extra space between characters. This is the default value.
  • length: This mode specifies extra inter-character space in addition to the default space between the characters. Negative values are also allowed.
  • initial: It sets the letterSpacing property to its default value.
  • inherit: This property is inherited from its parent element.

Return Value: It returns a string that represents a space between the characters. 

Example 1: 

html
<!DOCTYPE html>  <html>      <head>          <title>             DOM Style letterSpacing Property          </title>      </head>           <body>          <center>              <h1 style = "color:green;">                  GeeksForGeeks              </h1>                           <h2>DOM Style letterSpacing Property </h2>                              <p id = "GFG">                 A computer science portal for geeks             </p>                          <button type = "button" onclick = "geeks()">                  Submit              </button>                           <script>                  function geeks() {                      document.getElementById("GFG").style.letterSpacing                             = "8px";                  }              </script>          </center>      </body>  </html>                     

Output:

  • Before Click on the button:

 

  • After Click on the button: 

Example 2: 

html
<!DOCTYPE html>  <html>      <head>          <title>             DOM Style letterSpacing Property          </title>      </head>           <body>          <center>              <h1 style = "color:green;">                  GeeksForGeeks              </h1>                          <h2>                 DOM Style letterSpacing Property              </h2>                          <p id = "GFG">                 A computer science portal for geeks             </p>                          <button type = "button" onclick = "geeks()">                  Submit              </button>                           <script>                  function geeks() {                      document.getElementById("GFG").style.letterSpacing                             = "-1.5px";                  }              </script>          </center>      </body>  </html>                     

Output:

  • Before Click on the button:

 

  • After Click on the button:

 

Supported Browsers: The browser supported by DOM Style letterSpacing property are listed below:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 4
  • Firefox 1
  • Opera 3.5
  • Apple Safari 1

B

bestharadhakrishna
Improve
Article Tags :
  • Technical Scripter
  • Web Technologies
  • HTML
  • HTML-DOM

Similar Reads

    HTML DOM Style listStyleType Property
    The HTML DOM Style listStyleType property is used to set or return the list-item marker type. It has default values as "disc" for <ul> and "decimal" for <ol> and returns a string that represents the type of the list.  SyntaxReturns the listStyleType property.object.style.listStyleTypeSet
    2 min read
    HTML DOM Option Object
    The HTML DOM Option object represents an individual <option> element within a <select>, <datalist>, or <optgroup>. It allows JavaScript to access and manipulate the properties of options, such as setting the text, value, or whether an option is selected.Properties:disabled: T
    2 min read
    HTML | DOM Style listStylePosition Property
    The DOM Style listStylePosition property sets or returns the position of the list-item marker. Syntax : For set the listStylePosition property:object.style.listStylePosition = valueFor return the listStylePosition property:object.style.listStylePosition Return Value: This return a String that repres
    2 min read
    HTML | DOM Style fontFamily Property
    The fontFamily property set/return a list of Font-Family names and generic-family names for text in an element. The web browser will implement the first value it recognizes. Syntax: It returns the fontFamily property.object.style.fontFamilyIt sets the fontFamily Property.object.style.fontFamily = "f
    2 min read
    HTML | DOM Style flexShrink Property
    The Style flexShrink property in HTML DOM is used to set how the specific item can be shrink in relation to the remaining flexible items within the container. Syntax: It is used to return the flexShrink property.object.style.flexShrinkIt is used to set the flexShrink property.object.style.flexShrink
    2 min read
    HTML DOM createDocumentFragment() Method
    The createDocumentFragment() method in HTML DOM is used to create the document fragment which is useful for changing the content of the document such as deleting, modifying, or adding a new node. This method creates the document fragment, then appends the elements of the document to the document fra
    2 min read
    HTML | DOM Location origin Property
    The DOM Location origin Property in HTML is used to return the protocol, hostname and port number of a URL. This is a read-only property. Syntax: location.origin Return Value: This method returns a String value representing the protocol, the domain name (or IP address) and port number. The URL's hav
    1 min read
    HTML | DOM Style fontSize Property
    The fontSize property is used to set or get the font size of characters in a word should appear. Syntax: It returns the fontSize property.object.style.fontSizeIt sets the fontSize Property.object.style.fontSize = "value|initial|inherit" Property Values: ValueDescriptionxx-small x-small small medium
    2 min read
    HTML | DOM Style marginLeft Property
    The DOM Style marginLeft property is used to set or get the left margin of an element. The margin is used to insert space around the border, unlike padding that is used to insert space within the border of an element. Syntax: To Set the marginLeft:object.style.marginLeft='%|length|auto|initial|inher
    2 min read
    HTML DOM MouseEvent
    The MouseEvent Object handles events that occur when the mouse interacts with the HTML document. There are lots of events that interacts with the HTML document. Mouse Events: Mouse events are the action taken by the user on the web page, like clicking, hovering over, etc. Mouse Events Description on
    3 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences