html example কেন এই ইনলাইন-ব্লক ডিভি উপাদানগুলির মধ্যে একটি অনুমানযোগ্য ফাঁক নেই?




html computer code (5)

আমার দুটি ইনলাইন-ব্লক div উপাদান রয়েছে, যা একে অপরের পাশে অবস্থিত। যাইহোক, মার্জিন 0 এ সেট করা সত্ত্বেও দুটি divs মধ্যে 4 পিক্সেলের একটি রহস্যময় স্থান বলে মনে হচ্ছে। তাদের কোন অভিভাবক divs প্রভাবিত হয় - কি হচ্ছে?

সিএসএস

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

আমি এটা দেখতে চাই:


inline-block ব্যবহার করে আপনার এইচটিএমএল-তে হোয়াইট-স্পেসের অনুমতি দেয়, এটি সাধারণত .25em (বা 4px) সমান।

আপনি সাদা-স্থানটি মন্তব্য করতে পারেন অথবা আরও কমন্স সমাধানটি, পিতামাতার font-size 0 এ সেট করতে এবং ইনলাইন-ব্লক উপাদানগুলিতে এটি প্রয়োজনীয় আকারে পুনরায় সেট করতে হয়।


কেবল একটি সীমানা যুক্ত করুন: 2px solid #e60000 ; আপনার দ্বিতীয় ডিভ্যাগ ট্যাগ সিএসএস।

নিশ্চিতভাবে এটি কাজ করে

#Div2Id {
    border: 2px solid #e60000; --> color is your preference
}

ফ্লেক্স জড়িত একটি সমাধান খুঁজে পাওয়া যায় নি, কারণ ফ্লেক্স পুরানো ব্রাউজারে কাজ করে না। উদাহরণ:

.container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}

.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}

.cols:last-child {
    margin-right:0;
}

আপনি যোগ করতে হবে

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
    margin-right:-4px;
}

কারন যখনই আপনি display:inline-block লিখবেন display:inline-block এটি অতিরিক্ত margin-right:4px নেয় margin-right:4px । সুতরাং, আপনি এটি অপসারণ করতে হবে।


inline-block স্বয়ংক্রিয়ভাবে ডিফল্ট white-space সেট করে, যেমন সবাই বলছে। (এটি উপাদানগুলির "ইনলাইন" বৈশিষ্ট্যগুলির কারণে, আপনার HTML মার্কআপের পাঠ্যের একটি স্ট্রিংয়ের শব্দের মধ্যে দূরত্ব হিসাবে একই। এই কারণে মার্কআপে white-space স্থানটিও মুছে ফেলা হয়।) সবচেয়ে সহজ float কেবলমাত্র float ধারক। (যেমন float: left; ) অন্য নোটে, প্রতিটি id অনন্য হতে হবে, অর্থাত আপনি একই HTML ডকুমেন্টে একই id ব্যবহার করতে পারবেন না। আপনি পরিবর্তে ক্লাস ব্যবহার করা উচিত, যেখানে আপনি একাধিক উপাদানের জন্য একই class ব্যবহার করতে পারেন।

.container {
    display: inline-block;
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}




padding