go to
ForumEasy.com
Community Sandbox
Home
» Sandbox
Play your own code in the sandbox
Edit Your Code:
<!DOCTYPE html> <html> <head> <style> /* edit or add your own CSS code here */ .box { background: green; margin: 5px; width: 80px; height: 100px; } #inline-block { display: inline-block; } #inline { display: inline; } </style> </head> <body> <h2>CSS Display: Inline-block vs Inline</h2> <p> Those 8 boxes are displayed in <b>inline-block</b> mode inside a paragragh. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. <DIV class="box" id="inline-block">Box#1</DIV> <DIV class="box" id="inline-block">Box#2</DIV> <DIV class="box" id="inline-block">Box#3</DIV> <DIV class="box" id="inline-block">Box#4</DIV> <DIV class="box" id="inline-block">Box#5</DIV> <DIV class="box" id="inline-block">Box#6</DIV> <DIV class="box" id="inline-block">Box#7</DIV> <DIV class="box" id="inline-block">Box#8</DIV> These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. </p> <br> <p> The following 6 box are displayed in <b>inline</b> mode inside a paragragh with texts. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. <DIV class="box" id="inline">Box#1</DIV> <DIV class="box" id="inline">Box#2</DIV> <DIV class="box" id="inline">Box#3</DIV> <DIV class="box" id="inline">Box#4</DIV> <DIV class="box" id="inline">Box#5</DIV> <DIV class="box" id="inline">Box#6</DIV> These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. These are some texts. </p> </body> </html>
Run »
Result Output:
Back
Powered by
ForumEasy
© 2003-2005, All Rights Reserved. |
Privacy Policy
|
Terms of Use
Get your own forum today. It's easy and free.