এখন আমরা CSS display-এর দুটি-মান সিনট্যাক্স ব্যবহার করে উপাদানগুলির ডিসপ্লে টাইপ স্পষ্টভাবে সেট করতে পারব। এটি আমাদের উপাদানের ফ্লো লেআউট পরিবর্তন করতে দেয়।
সিনট্যাক্স
CSS display প্রপার্টির সিনট্যাক্স নিচে দেওয়া হলো:
Selector { display: /*inside*/ /*outside*/ }উদাহরণ
নিচের উদাহরণগুলো CSS display প্রপার্টি ব্যাখ্যা করে।
<!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>এটি Firefox-এ নিচের আউটপুট দেয়:
উদাহরণ
<!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>এটি নিচের আউটপুট দেয়:
