Skip to content

Courses
Tutorials
Practice
Contests

CSS Tutorial
CSS Exercises
CSS Interview Questions
CSS Selectors
CSS Properties
CSS Functions
CSS Examples
CSS Cheat Sheet
CSS Templates
CSS Frameworks
Bootstrap
Tailwind
CSS Formatter

How to remove the space between inline-block elements?

How to prevent line breaks in the list of items using CSS?

Last Updated : 03 Aug, 2023

Comments

Improve

Suggest changes

Like Article

Like

Report

The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items.

Syntax:

element {
    display:inline-block;
}

Example:

html

   <!DOCTYPE html>
<html>
 
<head>
    <title>preventline break in list items</title>
    <style>
        li {
            display:inline-block;
            text-decoration:underline;
        }
        h1 {
            color:green;
        }
        h1, h2 {
            text-align:center;
        }
        body {
            width:70%;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>display:inline-block;</h2>
    <b>Subjects Of Computer science:</b>
   
    <ul>
        <li>Computer Network</li>
        <li>Operating System </li>
        <li>Data Structure using C</li>
        <li>Object Oriented Programming Concepts</li>
        <li>Digital Electronics</li>
    </ul>
</body>
 
</html>
 
  

Output:

How to remove the space between inline-block elements?

M

manaschhabra2

Improve

Article Tags :

CSS
Web Technologies
CSS-Misc

Similar Reads

What is the difference between â€œword-break: break-allâ€ versus â€œword-wrap: break-wordâ€ in CSS ?

The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. Difference between the "word-break: break-all;" and "word-wrap: break-word;" word-break:

How to make div height expand with its content using CSS ?

When designing a webpage, ensuring that a div adjusts its height according to its content is important for creating a flexible and responsive layout. By using CSS, you can easily make a div adapt to varying content sizes, which is particularly useful when dealing with dynamic or unpredictable conten

How to float three div side by side using CSS?

Floating three div elements side by side using CSS means aligning them horizontally in a row. This is done by applying float: left; to each div, which moves them to the left of the parent container, allowing them to sit next to each other. These are the following ways to solve this problem: Table of

How to change color of PNG image using CSS?

Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function. filter: none|blur()|brightness()|contrast()|drop-sh

What is the best way to include CSS file? Why use @import?

CSS property can be include in the HTML page in a number of different ways. HTML documents are formatted according to the information in the style sheet which is to be included.There are many ways to include CSS file which are listed below: External style sheet (Using HTML <link> Tag): Externa

How to style icon color, size, and shadow by using CSS ?

Styling an icon's color, size, and shadow in CSS involves setting the color property for the icon's color, adjusting its size with font-size or width/height, and applying box-shadow or text-shadow for visual depth effects. When using Font Awesome, adding icons is simple and requires no downloads or

How to set multiple background images using CSS?

The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr

CSS Preprocessor SASS

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that enhances standard CSS by introducing features like variables, nesting, imports, mixins, and inheritance, all while maintaining compatibility with all CSS versions. Key Features of Sass:Variables: Store reusable values such as color

CSS Website Layout

CSS website layout divides a webpage into multiple sections like header, navigation bar, content area, and footer, making it easier to organize content and build the site. 1. Header SectionThe header is the top section of a webpage, typically containing the website's name or logo. [GFGTABS] html

How to make div not larger than its contents using CSS?

There are three ways to achieve this problem: By default case Using inline-block property Using fit-content property in width and height Default Case: In HTML div is by default fit to content inside it. The example goes like this: Example 1: <!DOCTYPE html> <html lang = "en" dir =

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

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

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