Connect with us
Use this property to change the position of any element appearing in the web page, the important value of this display property is as follows -
You can use this value to change the position of any element appearing in the web page, with this value, the position of the element is changed horizontally (horizontally) so that the element in the web page is displayed in a line. .
Example 1
|
<!DOCTYPE html> <html> <head> <style> p { display: inline; } </style> </head> <body> <p>HTML</p> <p>CSS</p> <p>javascript</p> <p>PHP</p> </body> </html> |
Output
HTML CSS javascript PHP
With this value, the position of the element is changed horizontally (horizontally), but using this value, the element's position is displayed horizontally (horizontally) after leaving blank space in the web page.
Example
|
<!DOCTYPE html> <html> <head> <style> p { display: inline-block; } </style> </head> <body> <p>HTML</p> <p>CSS</p> <p>javascript</p> <p>PHP</p> </body> </html> |
Output
HTML CSS javascript PHP
With this value, the position of the element is changed vertically, using this value, the element is displayed from the new line in the web page, it is mostly used to create a vertical navigation bar.
Example
|
<!DOCTYPE html> <html> <head> <style> span { display: block; } </style> </head> <body> <span>First paragraph </span> <span>Second paragraph </span> </body> </html> |
Output
First paragraph
Second paragraph
