Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial; padding: 20px; line-height: 2; } .block { display: block; background: #ede9fe; padding: 8px; margin: 4px 0; } .inline { display: inline; background: #d1fae5; padding: 4px; } .inline-block { display: inline-block; background: #fef3c7; padding: 8px 16px; width: 150px; } .gone { display: none; } .ghost { visibility: hidden; background: #fce7f3; padding: 8px; } </style> </head> <body> <div class="block">Block — full width</div> <span class="inline">Inline A</span> <span class="inline">Inline B</span> <div style="margin-top: 8px;"> <span class="inline-block">inline-block 1</span> <span class="inline-block">inline-block 2</span> </div> <p class="gone">This is display:none — invisible and takes no space</p> <p class="ghost">This is visibility:hidden — invisible but takes space</p> </body> </html>
Result
Open