Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS Latest Updates - Inner & Outer Values of display Property
We will now be able to explicitly set display type of elements by two valued syntax of CSS display. This will allow us to change the flow layout of element.
Display an Inline Element
The following examples illustrate CSS display property with multi-keyword −
display: inline flow-root;
The inline displays an element as an inline element whereas with the flow-root, the element generates a block box that establishes a new block formatting context.
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body,div,span {
box-shadow: inset 0 0 12px lightgreen;
border: 2px dotted gray;
}
span {
padding: 2%;
display: inline flow-root;
}
</style>
</head>
<body>
<div>
<p>
Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.
</p>
<img src="https://images.unsplash.com/photo-1611625618313-68b87aaa0626?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<span>Inline Block</span> <span>Span</span>
Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
</div>
</body>
</html>
Change the Default Display With the Inner Value
Example
Let us now see an example where we are setting inline display property value for the <li> element and create a horizontal menu −
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
li {
display: inline;
}
</style>
</head>
<body>
<h2>Tutorials List</h2>
<p>The following are the list of resources:</p>
<ul>
<li><a href="https://www.tutorialspoint.com/machine_learning/index.htm" target="_blank">Machine Learning</a></li>
<li><a href="https://www.tutorialspoint.com/python_data_science/index.htm" target="_blank">Python Data Science</a></li>
<li><a href="https://www.tutorialspoint.com/python/index.htm" target="_blank">Python</a></li>
<li><a href="https://www.tutorialspoint.com/csharp/index.htm">C#</a></li>
<li><a href="https://www.tutorialspoint.com/artificial_intelligence/index.htm" target="_blank">Artificial Intelligence</a></li>
</ul>
</body>
</html>
Display an Element Span as a Block Element
In this example, we have used the display property with multi-keyword −
display: block flow;
The block displays an element as a block element whereas the element lays out its contents using flow layout.
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body,div,span {
margin: 2%;
box-shadow: inset 0 0 12px orange;
border: 2px ridge cadetblue;
}
span {
padding: 2%;
display: block flow;
}
</style>
</head>
<body>
<div>
<p>This is demo text.</p>
<span>Block is now</span> <span>Block Flow</span>
This is another demo text.
</div>
</body>
</html>
Change the Default Display of an Element
Let us now see the example where we are setting block display property value for the <a> element −
a {
display: block;
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
a {
display: block;
}
</style>
</head>
<body>
<h1>Our Tutorials</h1>
<a href="https://www.tutorialspoint.com/machine_learning/index.htm" target="_blank">Machine Learning</a>
<a href="https://www.tutorialspoint.com/python_data_science/index.htm" target="_blank">Data Science</a>
<a href="https://www.tutorialspoint.com/csharp/index.htm" target="_blank">C#</a>
</body>
</html>
150 Views
