CSS সর্বশেষ আপডেট - প্রদর্শন সম্পত্তির অভ্যন্তরীণ ও বাইরের মান

আমরা এখন CSS ডিসপ্লের দুটি মূল্যবান সিনট্যাক্স দ্বারা স্পষ্টভাবে ডিসপ্লে ধরনের উপাদান সেট করতে সক্ষম হব। এটি আমাদের উপাদানের প্রবাহ বিন্যাস পরিবর্তন করার অনুমতি দেবে

সিনট্যাক্স

CSS প্রদর্শন সম্পত্তির সিনট্যাক্স নিম্নরূপ -

Selector {
   display: /*inside*/ /*outside*/
}

উদাহরণ

নিম্নলিখিত উদাহরণগুলি সিএসএস ডিসপ্লে বৈশিষ্ট্যকে চিত্রিত করে৷

৷

<!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>

এটি ফায়ারফক্সে নিম্নলিখিত আউটপুট দেয়

CSS সর্বশেষ আপডেট - প্রদর্শন সম্পত্তির অভ্যন্তরীণ ও বাইরের মান

উদাহরণ

<!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>

এটি নিম্নলিখিত আউটপুট দেয়

CSS সর্বশেষ আপডেট - প্রদর্শন সম্পত্তির অভ্যন্তরীণ ও বাইরের মান