Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Changing the Default Display Value using CSS
Every element in CSS has a default display value that determines how it appears on the webpage. We can easily change this default behavior by explicitly setting the display property to a different value.
Syntax
selector {
display: value;
}
Common Display Values
| Value | Description |
|---|---|
block |
Element takes full width and starts on new line |
inline |
Element takes only necessary width and flows with text |
inline-block |
Combines properties of both inline and block |
none |
Element is completely hidden |
Example 1: Changing List Items to Inline Display
By default, list items (<li>) display as block elements, appearing vertically. We can change them to inline to create a horizontal menu −
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
padding: 10px;
}
li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
color: blue;
}
</style>
</head>
<body>
<h2>Tutorials List</h2>
<p>The following are the list of resources:</p>
<ul>
<li><a href="/machine_learning/index.htm">Machine Learning</a></li>
<li><a href="/python_data_science/index.htm">Python Data Science</a></li>
<li><a href="/python/index.htm">Python</a></li>
<li><a href="/csharp/index.htm">C#</a></li>
</ul>
</body>
</html>
A page with an orange background paragraph and a horizontal list of tutorial links displayed inline instead of vertically.
Example 2: Changing Anchor Elements to Block Display
By default, anchor tags (<a>) are inline elements. We can change them to block elements to make each link appear on a new line −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
a {
display: block;
padding: 10px;
margin: 5px 0;
background-color: #f0f0f0;
text-decoration: none;
color: #333;
border-radius: 5px;
}
a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h1>Our Tutorials</h1>
<a href="/machine_learning/index.htm">Machine Learning</a>
<a href="/python_data_science/index.htm">Data Science</a>
<a href="/csharp/index.htm">C#</a>
</body>
</html>
A green heading followed by block-level links, each appearing on its own line with gray background and padding, creating a vertical menu layout.
Conclusion
The CSS display property allows you to override an element's default display behavior. Use inline to make block elements flow horizontally and block to make inline elements stack vertically.
Updated on: 2026-03-15T13:39:19+05:30
320 Views
Advertisements