"ডিসপ্লে: টেবিল-সেল" সহ একটি ডিভ কেন? মার্জিন দ্বারা প্রভাবিত না?

Question

আমার divসাথে একে অপরের পাশে উপাদান রয়েছেdisplay: table-cell; ।

আমি marginতাদের মধ্যে সেট করতে চাই , কিন্তুmargin: 5px এর কোনও প্রভাব নেই। কেন?

আমার কোড:

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

Answer 1

কারণ

থেকে MDN ডকুমেন্টেশন :

[মার্জিন সম্পত্তি] টেবিল-পরিচয়লিপি, টেবিল এবং ইনলাইন-টেবিল ব্যতীত টেবিল প্রদর্শন ধরণের উপাদানগুলি ব্যতীত সমস্ত উপাদানগুলিতে প্রযোজ্য

অন্য কথায়, marginসম্পত্তি উপাদানগুলির জন্য প্রযোজ্য নয়display:table-cell ।

সমাধান

border-spacingপরিবর্তে সম্পত্তি ব্যবহার বিবেচনা করুন ।

নোট করুন এবং এটি একটি display:tableলেআউট এবং সহ পিতামাতার উপাদানগুলিতে প্রয়োগ করা উচিত border-collapse:separate।

উদাহরণ স্বরূপ:

এইচটিএমএল

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

সিএসএস

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

JsFizz ডেমো দেখুন

---

অনুভূমিকভাবে এবং উলম্বভাবে বিভিন্ন মার্জিন

ডিয়েগো কুইরাস দ্বারা উল্লিখিত হিসাবে, border-spacingসম্পত্তি অনুভূমিক এবং উল্লম্ব অক্ষের জন্য একটি আলাদা মার্জিন নির্ধারণ করতে দুটি মানও স্বীকার করে।

উদাহরণ স্বরূপ

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */

Comments

ধন্যবাদ! অনুভূমিক এবং উল্লম্ব স্থানটি ডিফেরেন্ট বর্ডার-স্পেসিং হওয়া প্রয়োজন: অনুভূমিক উল্লম্ব;

— ডিয়েগো কুইরাস

এবং আমি ভেবেছিলাম আমি একটি বাগ খুঁজে পেয়েছি; দেখা যাচ্ছে আমাকে আরও সিএসএস শিখতে হবে।

— পিট অ্যালভিন

আমার ধারণা এই সত্য যদিও বাম / ডান / উপরে / নীচে মার্জিনগুলি পরিচালনা করে না? এবং কোনও নির্দিষ্ট টেবিল-সেল করার কোনও উপায় নেই কী বাকী থেকে আলাদা প্যাডিং রয়েছে?

— নাথান

@ নাথান যথাযথ যে paddingকোনও নির্বাচকের জন্য (যেমন শ্রেণি বা আইডি) সেট করা যেতে পারে। যদি আপনি marginকোষগুলির মধ্যবর্তীটি বোঝান border-spacing, তবে এটি দুটি মান নির্ধারণ করে উল্লম্ব এবং অনুভূমিক অক্ষগুলির জন্য পৃথকভাবে সেট করা যেতে পারে তবে এটি পৃথক কক্ষের জন্য নয়, পুরো টেবিলের জন্য প্রযোজ্য।

— বোয়াজ

Answer 2

মার্জিন সেট করতে আপনি অভ্যন্তরীণ ডিভ ব্যবহার করতে পারেন।

<div style="display: table-cell;">
   <div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
  <div style="margin:5px;background-color: green;">1</div>
</div>

জেএস ফিডল

Comments

আপনি যদি কোষগুলির মধ্যে মার্জিন চান তবে সেগুলির বাম বা ডান না চান তবে এটি একটি ভাল ধারণা। তাহলে আপনার সিএসএস এর মতো কিছু হতে পারে .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }। তবে এই গোটচাকেও নোট করুন: এই উদাহরণটির লাল এবং সবুজ ব্যাকগ্রাউন্ডগুলি প্রয়োজনীয়তার সাথে উচ্চতায় মেলে না কারণ তারা কোষে নেই।

— হেনরিক এন

Answer 3

সারণী ঘরগুলি মার্জিনকে সম্মান করে না, তবে আপনি পরিবর্তে স্বচ্ছ সীমানা ব্যবহার করতে পারেন:

div {
  display: table-cell;
  border: 5px solid transparent;
}

দ্রষ্টব্য: আপনি এখানে শতাংশ ব্যবহার করতে পারবেন না ... :(

Answer 4

আপনার যদি একে অপরের পাশে ডিভ থাকে

<div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>

এই কাজ করা উচিত!

Comments

ঠিক আছে, তবে যদি সে সমান উচ্চতায় দুটি ডিভ চায়? ভাসা এটি করতে পারে না।

— হায়োরোশিমা

আর সে জন্যই এর জাতীয় সন্ত্রস্ত :)

— ক্রিস শুভ

@ ক্রিসহ্যাপি সিএসএস সমাধান থাকলে কখনই জাভাস্ক্রিপ্ট ব্যবহার করবেন না। আপনার কোড সবেমাত্র বিশাল হয় gets

— ssc-hrep3

@ ssc-hrep3 প্রতিক্রিয়া যেমন চাহিদা আসে, তত বড় সিএসএস সমাধানগুলি এখন পর্যাপ্ত নয় ...

— ক্রিস হ্যাপি

এগুলি যথেষ্ট - বিশেষত প্রতিক্রিয়াশীল প্রয়োজনীয়তা সহ। শুধু একবার দেখুনফ্লেক্সবক্সে যা এখন বেশিরভাগ প্রধান ব্রাউজার দ্বারা সমর্থিত এবং খুব সহজেই এই সঠিক সমস্যাটি সমাধান করে। লেআউটিং শৈলীগুলি কখনই জাভাস্ক্রিপ্ট দ্বারা করা উচিত নয়।

— ssc-hrep3