بلوک

اساسی ترین بلوک فاصله دار Bulma

رنگ ندارد
اندازه ندارد
متغیرها دارد

عنصر block یک ابزار ساده است. بین المان های html فاصله ایجاد می کند:

این متن در یک block قرار دارد.
این متن در block دوم قرار دارد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
این متن در block سوم قرار دارد. این block فاصله ای از پایین ندارد.
                                
<div class="block">
    این متن در یک <strong>block</strong>قرار دارد.
</div>
<div class="block">
    این متن در <strong>block دوم</strong>قرار دارد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
</div>
<div class="block">
    این متن در <strong>block سوم</strong>قرار دارد. این block فاصله ای از پایین ندارد.
</div>
                                        
                                    

همانطور که مشاهده می کنید، دو بلوک اول margin-bottom اعمال شده است،اما سومین مورد نیست. . این به این دلیل است که Bulma فضایی را روی همه بلوک ها اعمال می کند ، به جز مورد آخر . این بدان معناست که شما می توانید از هر تعداد بلوک استفاده کنید ، فاصله فقط بین آنها ظاهر می شود

بدون استفاده از block فاصله ای بین المان های HTML وجود نخواهد داشت:

این متن بدون block است.
این متن در یک block قرار دارد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
این متن نیز بدون یک block است.
                                
<div>
  این متن <em>بدون</em><strong>block</strong> است.
</div>
<div>
  این متن در یک <em>isn't</em><strong>block</strong> قرار ندارد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
</div>
<div>
  این متن نیز <em>بدون</em><strong>block</strong> است.
</div>
                    
                    

یک خط CSS #

همانطور که مشاهده می کنید ، CSS block بسیار ساده است: این یک margin-bottom را برای همه المان ها اعمال می کند، به جز مورد آخر .

                        
.block:not(:last-child) {
margin-bottom: 1.5rem;
}
                    
                

این مانع از افزودن فضای غیر ضروری به المان آخر می شود.


پیش از این در Bulma استفاده شده است. #

در واقع ، شما در حال استفاده از block بدون دانستن آن هستید. ویژگی های CSS block در چندین المان و کامپوننت Bulma به اشتراک گذاشته شده است:

  • breadcrumb
  • level
  • message
  • pagination
  • tabs
  • box
  • content
  • notification
  • other
  • progress
  • table
  • title

این به لطف ویژگی extension٪ block Sass placeholder است.

در نتیجه، مهم نیست که از چه المان ها و کامپوننت های Bulma استفاده می کنید، و بدون توجه به ترتیب آنها فضای ثابتی بین آنها وجود خواهد داشت.