- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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
Syntax
The syntax of CSS display property is as follows −
Selector {
display: /*inside*/ /*outside*/
}Example
The following examples illustrate CSS display property.
<!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>This gives the following output in Firefox
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>
Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.
</p>
<span>Block is now</span> <span>Block Flow</span>
Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
</div>
</body>
</html>This gives the following output
Updated on 10-Feb-2021 13:47:22
- Related Questions & Answers
- Usage and syntax of INNER and OUTER JOIN in DB2
- Difference between Inner and Outer join in SQL
- Difference Between Inner Join and Outer Join in SQL
- Values of CSS overflow property
- Working with CSS Display Property
- Display Property Using in CSS
- How to do an inner join and outer join of two data frames in R?
- CSS object-fit Property Values
- How to access Static variable of Outer class from Static Inner class in java?
- Values for the CSS cursor property
- Latest CSS Properties and APIs for Web Design in 2020
- Perform calculations to determine CSS property values
- Ignore null values in MySQL and display rest of the values
- INNER JOIN vs FULL OUTER JOIN vs LEFT JOIN vs RIGHT JOIN in PostgreSQL?
- Cursor property of CSS
Advertisements