css - tutorial - w3schools




SPAN বনাম DIV(ইনলাইন-ব্লক) (4)

  1. ইনলাইন-ব্লকটি ইনলাইন বা ব্লক করার জন্য একটি উপাদান এর প্রদর্শনের সেটিংস অর্ধেক বিন্দু। এটি উপাদানটিকে ইনলাইনের মতো নথির ইনলাইন প্রবাহে রাখে: ইনলাইন করে, তবে আপনি উপাদানটির বাক্সের বৈশিষ্ট্যগুলি (প্রস্থ, উচ্চতা এবং উল্লম্ব মার্জিন) প্রয়োগ করতে পারেন যেমন আপনি প্রদর্শন করতে পারেন: ব্লক।

  2. আমরা ইনলাইন উপাদানগুলির মধ্যে ব্লক উপাদান ব্যবহার করতে হবে না। এটি অবৈধ এবং এমন অনুশীলনগুলি করার কোন কারণ নেই।

একটি ওয়েবপেজের লেআউট করার জন্য <span> পরিবর্তে <div style="display:inline-block"> ব্যবহার করার কোনো কারণ আছে কি?

আমি কি ভেতরের ভেতরে নিস্তব্ধ সামগ্রী রাখতে পারি? কি বৈধ এবং কি না?

লেআউট মত একটি 3x2 টেবিল করতে এই ব্যবহার করা ঠিক আছে?

<div>
   <span> content1(divs,p, spans, etc) </span>
   <span> content2(divs,p, spans, etc) </span>
   <span> content3(divs,p, spans, etc) </span>
</div>
<div>
   <span> content4(divs,p, spans, etc) </span>
   <span> content5(divs,p, spans, etc) </span>
   <span> content6(divs,p, spans, etc) </span>
</div>

অন্যরা উত্তর দিয়েছে ... div একটি "ব্লক উপাদান" (এখন ফ্লোর সামগ্রী হিসাবে পুনরায় সংজ্ঞায়িত) এবং span একটি "ইনলাইন উপাদান" ( ফ্রেজিং সামগ্রী )। হ্যাঁ, আপনি এই উপাদানের ডিফল্ট উপস্থাপনাটি পরিবর্তন করতে পারেন, তবে "প্রবাহ" বনাম "ব্লক" এবং "ফ্রিজিং" বনাম "ইনলাইন" এর মধ্যে একটি পার্থক্য রয়েছে।

প্রবাহ সামগ্রী হিসাবে শ্রেণীবদ্ধ একটি উপাদান শুধুমাত্র প্রবাহ সামগ্রী প্রত্যাশিত হয় যেখানে ব্যবহার করা যেতে পারে, এবং ফ্রিজিং কন্টেন্ট হিসাবে শ্রেণীবদ্ধ উপাদান ব্যবহার করা যেতে পারে যেখানে ফ্রেজ কন্টেন্ট আশা করা হয়। যেহেতু সমস্ত ফ্রিজিং সামগ্রী প্রবাহ সামগ্রী, যেহেতু কোথাও প্রবাহ সামগ্রী প্রত্যাশিত হয় এমন একটি ফ্রিজিং উপাদানও ব্যবহার করা যেতে পারে। চশমা আরো বিস্তারিত তথ্য প্রদান

সকল ফ্রিজিং উপাদান যেমন strong এবং em , শুধুমাত্র অন্য ফ্রিজিং উপাদানের অন্তর্ভুক্ত থাকতে পারে: উদাহরণস্বরূপ আপনি একটি cite ভিতরে একটি table রাখতে পারবেন না। div এবং li মতো সর্বাধিক প্রবাহ সামগ্রীতে প্রবাহের সমস্ত ধরণের সামগ্রী (পাশাপাশি ফ্রিজ সামগ্রী) থাকতে পারে, তবে কিছু ব্যতিক্রম রয়েছে: p , pre , এবং th অ-ফ্রিজিং প্রবাহ সামগ্রী ("ব্লক উপাদানগুলি") এর উদাহরণ। যে শুধুমাত্র ফ্রেজিং কন্টেন্ট থাকতে পারে ("ইনলাইন উপাদান")। এবং অবশ্যই dl এবং table হিসাবে সাধারণ উপাদান সীমাবদ্ধতা শুধুমাত্র কিছু উপাদান ধারণ করার অনুমতি দেওয়া হয়।

div এবং p উভয় অ-ফ্রিজিং প্রবাহ সামগ্রী থাকলে, ডিভিতে অন্যান্য প্রবাহ সামগ্রী বাচ্চাদের থাকতে পারে (আরও div গুলি এবং p গুলি সহ)। অন্য দিকে, p শুধুমাত্র ফ্রেজ কন্টেন্ট কন্টেন্ট থাকতে পারে। এর অর্থ হল আপনি একটি div ভিতরে একটি div স্থাপন করতে পারবেন না, যদিও উভয়ই অ-ফ্রেজ়িং প্রবাহ উপাদান।

এখন এখানে kicker এর। এই শব্দার্থিক বৈশিষ্ট্য উপাদান প্রদর্শিত হয় কিভাবে সম্পর্কহীন হয়। সুতরাং, যদি আপনার একটি div একটি div থাকে তবে আপনার CSS এ span {display: block;} এবং div {display: inline;} span {display: block;} থাকলেও আপনি একটি বৈধতা ত্রুটি পাবেন।


আমি এই প্রশ্ন পুরানো জানি, কিন্তু SPANs পরিবর্তে সব DIVs ব্যবহার করবেন না কেন? তারপর সবকিছু একসঙ্গে সব খুশি।

উদাহরণ:

<div> 
   <div> content1(divs,p, spans, etc) </div> 
   <div> content2(divs,p, spans, etc) </div> 
   <div> content3(divs,p, spans, etc) </div> 
</div> 
<div> 
   <div> content4(divs,p, spans, etc) </div> 
   <div> content5(divs,p, spans, etc) </div> 
   <div> content6(divs,p, spans, etc) </div> 
</div>

আমি মনে করি এটি "প্রদর্শন: ইনলাইন-ব্লক" এত কার্যকর কেন তা বোঝার জন্য ইনলাইন-এলিমেন্টস (যেমন স্প্যান) এবং ব্লক-এলিমেন্টস (যেমন ডিভি) এর মধ্যে মৌলিক পার্থক্যগুলি বুঝতে সহায়তা করবে।

সমস্যা : ইনলাইন উপাদানগুলি (যেমন, স্প্যান, এ, বোতাম, ইনপুট ইত্যাদি) অনুভূমিক নয় শুধুমাত্র "মার্জিন" শুধুমাত্র উল্লম্বভাবে (মার্জিন-বাম এবং মার্জিন-ডান) নিন। উল্লম্ব স্থান শুধুমাত্র ব্লক উপাদানগুলিতে কাজ করে (অথবা "প্রদর্শন: ব্লক" সেট করা হয়)

সমাধান : কেবলমাত্র "প্রদর্শন: ইনলাইন-ব্লক" মাধ্যমে উল্লম্ব দূরত্ব (শীর্ষ এবং নীচে )ও নেবে। কারণ: ইনলাইন উপাদান স্প্যান, এখন একটি ব্লক উপাদান হিসাবে বাইরে আচরণ করে, কিন্তু ভিতরে একটি ইনলাইন উপাদান মত

এখানে কোড উদাহরণ:

 /* Inlineelement */

        div,
        span {
            margin: 30px;
        }

        span {
            outline: firebrick dotted medium;
            background-color: antiquewhite;
        }

        span.mitDisplayBlock {
            background: #a2a2a2;
            display: block;
            width: 200px;
            height: 200px;
        }

        span.beispielMargin {
            margin: 20px;
        }

        span.beispielMarginDisplayInlineBlock {
            display: inline-block;
        }

        span.beispielMarginDisplayInline {
            display: inline;
        }

        span.beispielMarginDisplayBlock {
            display: block;
        }

        /* Blockelement */

        div {
            outline: orange dotted medium;
            background-color: deepskyblue;
        }

        .paddingDiv {
            padding: 20px;
            background-color: blanchedalmond;
        }

        .marginDivWrapper {
            background-color: aliceblue;

        }

        .marginDiv {
            margin: 20px;
            background-color: blanchedalmond;
        }
    </style>
    <style>
        /* Nur für das w3school Bild */

        #w3_DIV_1 {
            bottom: 0px;
            box-sizing: border-box;
            height: 391px;
            left: 0px;
            position: relative;
            right: 0px;
            text-size-adjust: 100%;
            top: 0px;
            width: 913.984px;
            perspective-origin: 456.984px 195.5px;
            transform-origin: 456.984px 195.5px;
            background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
            border: 2px dashed rgb(187, 187, 187);
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            padding: 45px;
            transition: all 0.25s ease-in-out 0s;
        }

        /*#w3_DIV_1*/

        #w3_DIV_1:before {
            bottom: 349.047px;
            box-sizing: border-box;
            content: '"Margin"';
            display: block;
            height: 31px;
            left: 0px;
            position: absolute;
            right: 0px;
            text-align: center;
            text-size-adjust: 100%;
            top: 6.95312px;
            width: 909.984px;
            perspective-origin: 454.984px 15.5px;
            transform-origin: 454.984px 15.5px;
            font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
        }

        /*#w3_DIV_1:before*/

        #w3_DIV_2 {
            bottom: 0px;
            box-sizing: border-box;
            color: black;
            height: 297px;
            left: 0px;
            position: relative;
            right: 0px;
            text-decoration: none solid rgb(255, 255, 255);
            text-size-adjust: 100%;
            top: 0px;
            width: 819.984px;
            column-rule-color: rgb(255, 255, 255);
            perspective-origin: 409.984px 148.5px;
            transform-origin: 409.984px 148.5px;
            caret-color: rgb(255, 255, 255);
            background: rgb(76, 175, 80) none repeat scroll 0% 0% / auto padding-box border-box;
            border: 0px none rgb(255, 255, 255);
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            outline: rgb(255, 255, 255) none 0px;
            padding: 45px;
        }

        /*#w3_DIV_2*/

        #w3_DIV_2:before {
            bottom: 258.578px;
            box-sizing: border-box;
            content: '"Border"';
            display: block;
            height: 31px;
            left: 0px;
            position: absolute;
            right: 0px;
            text-align: center;
            text-size-adjust: 100%;
            top: 7.42188px;
            width: 819.984px;
            perspective-origin: 409.984px 15.5px;
            transform-origin: 409.984px 15.5px;
            font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
        }

        /*#w3_DIV_2:before*/

        #w3_DIV_3 {
            bottom: 0px;
            box-sizing: border-box;
            height: 207px;
            left: 0px;
            position: relative;
            right: 0px;
            text-size-adjust: 100%;
            top: 0px;
            width: 729.984px;
            perspective-origin: 364.984px 103.5px;
            transform-origin: 364.984px 103.5px;
            background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            padding: 45px;
        }

        /*#w3_DIV_3*/

        #w3_DIV_3:before {
            bottom: 168.344px;
            box-sizing: border-box;
            content: '"Padding"';
            display: block;
            height: 31px;
            left: 3.64062px;
            position: absolute;
            right: -3.64062px;
            text-align: center;
            text-size-adjust: 100%;
            top: 7.65625px;
            width: 729.984px;
            perspective-origin: 364.984px 15.5px;
            transform-origin: 364.984px 15.5px;
            font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
        }

        /*#w3_DIV_3:before*/

        #w3_DIV_4 {
            bottom: 0px;
            box-sizing: border-box;
            height: 117px;
            left: 0px;
            position: relative;
            right: 0px;
            text-size-adjust: 100%;
            top: 0px;
            width: 639.984px;
            perspective-origin: 319.984px 58.5px;
            transform-origin: 319.984px 58.5px;
            background: rgb(191, 201, 101) none repeat scroll 0% 0% / auto padding-box border-box;
            border: 2px dashed rgb(187, 187, 187);
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            padding: 20px;
        }

        /*#w3_DIV_4*/

        #w3_DIV_4:before {
            box-sizing: border-box;
            content: '"Content"';
            display: block;
            height: 73px;
            text-align: center;
            text-size-adjust: 100%;
            width: 595.984px;
            perspective-origin: 297.984px 36.5px;
            transform-origin: 297.984px 36.5px;
            font: normal normal 400 normal 21px / 73.5px Lato, sans-serif;
        }

        /*#w3_DIV_4:before*/
   <h1> The Box model - content, padding, border, margin</h1>
    <h2> Inline element - span</h2>
    <span>Info: A span element can not have height and width (not without "display: block"), which means it takes the fixed inline size </span>

    <span class="beispielMargin">
        <b>Problem:</b> inline elements (eg span, a, button, input etc.) take "margin" only vertically (margin-left and margin-right)
        on, not horizontal. Vertical spacing works only on block elements (or if display: block is set) </span>

    <span class="beispielMarginDisplayInlineBlock">
        <b>Solution</b> Only through
        <b> "display: inline-block" </ b> will also take the vertical distance (top and bottom). Reason: Inline element Span,
        behaves now like a block element to the outside, but like an inline element inside</span>

    <span class="beispielMarginDisplayInline">Example: here "display: inline". See the margin with Inspector!</span>

    <span class="beispielMarginDisplayBlock">Example: here "display: block". See the margin with Inspector!</span>

    <span class="beispielMarginDisplayInlineBlock">Example: here "display: inline-block". See the margin with Inspector! </span>

    <span class="mitDisplayBlock">Only with the "Display" -property and "block" -Value in addition, a width and height can be assigned. "span" is then like
        a "div" block element.  </span>

    <h2>Inline-Element - Div</h2>
    <div> A div automatically takes "display: block." </ div>
    <div class = "paddingDiv"> Padding is for padding </ div>

    <div class="marginDivWrapper">
Wrapper encapsulates the example "marginDiv" to clarify the "margin" (distance from inner element "marginDiv" to the text)
        of the outer element "marginDivWrapper". Here 20px;)
        
    <div class = "marginDiv"> margin is for the margins </ div>
        And there, too, 20px;
    </div>

    <h2>w3school sample image </h2>
    source:
    <a href="https://www.w3schools.com/css/css_boxmodel.asp">CSS Box Model</a>
    <div id="w3_DIV_1">
        <div id="w3_DIV_2">
            <div id="w3_DIV_3">
                <div id="w3_DIV_4">
                </div>
            </div>
        </div>
    </div>





html