সিএসএসে "ডাবল" সীমানা রোধ করা হচ্ছে

Question 1

বলুন আমার সীমান্তের সাথে একে অপরের পাশে দুটি ডিভ রয়েছে ( https://chrome.google.com/webstore/category/home হিসাবে রেফারেন্স হিসাবে নেবেন ) with

আমার ডিভগুলি দ্বিগুণ সীমানা থাকার মতো দেখাতে বাধা দেওয়ার জন্য কি কোনও উপায় আছে (পছন্দসই কোনও সিএসএস ট্রিক)? আমি কী বলতে চাইছি তা আরও ভালভাবে বুঝতে এই চিত্রটিতে একবার দেখুন:

"ডাবল" সীমানা

আপনি দেখতে পাচ্ছেন যে যেখানে দুটি ডিভ মিলিত হয়েছে সেখানে এটি দ্বিগুণ সীমানা রয়েছে বলে মনে হয়।

Question 2

#divNumberOne { border-right: 0; }

Question 3

যদি আমরা এমন কোনও উপাদানগুলির বিষয়ে কথা বলি যা কোনও নির্দিষ্ট ক্রমে উপস্থিত হওয়ার গ্যারান্টি দেওয়া যায় না (সম্ভবত একটি সারিতে 3 টি উপাদান, তারপরে 2 টি উপাদান ইত্যাদির সারি রয়েছে), আপনি সংগ্রহের প্রতিটি উপাদানকে রেখে দিতে চান এমন কিছু চান । এই সমাধানটি কভার করা উচিত:

.collection {
    /* these styles are optional here, you might not need/want them */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid; /* use instead of border */
    margin-top: 1px;
    margin-left: 1px;
}

মনে রাখবেন যে রূপরেখা পুরানো ব্রাউজারগুলিতে (আই 7 এবং তার আগের) কাজ করে না ।

পর্যায়ক্রমে, আপনি সীমাগুলির সাথে লেগে থাকতে পারেন এবং নেতিবাচক মার্জিন ব্যবহার করতে পারেন:

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

Question 4

এইচটিএমএল:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

সিএসএস:

div {
    border: 1px solid #000;
    float: left;
}

div:nth-child(n+2) {
    margin-left: -1px;
}

ডেমো

আইই 8 সমর্থন জন্য আই 9 জেজে অন্তর্ভুক্ত করুন (এটি সমস্ত সিএসএস নির্বাচনকারী / সিউডো-উপাদানগুলির জন্য খুব দরকারী)।

Question 5

আর একটি সমাধান বিবেচনা করতে পারে যা হ'ল সিএসএস সংলগ্ন ভাইবোন নির্বাচনকারী ।

সিএসএস

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFizz

Question 6

এটি অর্জনের জন্য আপনি বিজোড় নির্বাচক ব্যবহার করতে পারেন

.child{
   width:50%;
   float:left;
   box-sizing:border-box;
   text-align:center;
   padding:10px;
   border:1px solid black;
   border-bottom:none;
}
.child:nth-child(odd){
   border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
   border-bottom:1px solid black
}

<div>
    <div class="child" >1</div>
    <div class="child" >2</div>
    <div class="child" >3</div>
    <div class="child" >4</div>
    <div class="child" >5</div>
    <div class="child" >6</div>
    <div class="child" >7</div>
    <div class="child" >8</div>
</div>

স্নিপেট প্রসারিত করুন

Question 7

আমি শোতে দেরি করেছি তবে এর মতো রূপরেখা সম্পত্তিটি ব্যবহার করার চেষ্টা করুন:

.item {
  outline: 1px solid black;
}

সিএসএসের রূপরেখাগুলি দৈহিক স্থান দখল করে না এবং তাই ডাবল সীমানা রোধ করতে ওভারল্যাপ হয়ে যাবে।

Question 8

ডিভগুলি যদি একই শ্রেণির নাম থাকে:

div.things {
    border: 1px solid black;
    border-left: none;
}

div.things:first-child {
    border-right: 1px solid black;
}

এখানে একটি জেএসফিডাল ডেমো রয়েছে।

Question 9

ফ্লেক্সবক্স ব্যবহার করে একে অপরের ওভারল্যাপের আউটলাইনগুলি যথাযথভাবে পেতে দ্বিতীয় সন্তানের ধারক যুক্ত করা প্রয়োজন ...

<div class="grid__container">
    <div class="grid__item">
        <div class="grid__item-outline">
              <!-- content -->
        </div>
    </div>
</div>

এসসিএসএস

.grid__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}

.grid__item {
    flex: 0 1 25%; // grid of 4
    margin: 0 0 1px; // margin-bottom to prevent double lines
}

.grid__item-outline {
    margin: 0 0 0 1px; // margin-left to prevent double lines
    outline: 1px solid #dedede;
}

Question 10

ডানদিকে ডিভিএসে নিম্নলিখিত সিএসএস যুক্ত করুন:

position: relative;
left: -1px; /* your border-width times -1 */

অথবা কেবল একটি সীমানা সরান।

Question 11

আমি শুধু ব্যবহার

border-collapse: collapse;

মূল উপাদান মধ্যে

Question 12

  <div class="one"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>

সিএসএস:

  .one{
    width:100px;
    height:100px;
    border:thin red solid;
    float:left;
  }
.two{
    width:100px;
    height:100px;
    border-style: solid solid solid none;

    border-color:red;
    border-width:1px;
    float:left;
}

jsFiddle

Question 13

আমার ব্যবহারের ক্ষেত্রে একক সারিতে থাকা বাক্সগুলির জন্য ছিল যেখানে আমি জানতাম যে শেষ উপাদানটি কী হবে।

.boxes {
  border: solid 1px black  // this could be whatever border you need
  border-right: none;
}

.furthest-right-box {
  border-right: solid 1px black !important;
}

Question 14

আমি জানি এটি একটি দেরী প্রতিক্রিয়া, তবে আমি কেবল আমার 2 সেন্ট মূল্য ছাড়তে চেয়েছিলাম, যেহেতু আমার এটি করার পদ্ধতি এখানে নেই।

আপনি দেখুন, আমি সত্যিই মার্জিনের সাথে খেলতে পছন্দ করি না, বিশেষত নেতিবাচক মার্জিনগুলি । প্রতিটি ব্রাউজার এটিকে হ্যান্ডেল করে দেখায় যে কেবল কিছুটা আলাদা এবং মার্জিনগুলি অনেকগুলি পরিস্থিতিতে সহজেই প্রভাবিত হয়।

আমার ডিভ্স সহ একটি সুন্দর টেবিল রয়েছে তা নিশ্চিত করার আমার উপায়টি প্রথমে একটি ভাল এইচটিএমএল কাঠামো তৈরি করছে , তারপরে CSS প্রয়োগ করুন apply

আমি এটি কীভাবে করি তার উদাহরণ:

 <div class="tableWrap">
   <div class="tableRow tableHeaders">
     <div class="tableCell first">header1</div>
     <div class="tableCell">header2</div>
     <div class="tableCell">header3</div>
     <div class="tableCell last">header4</div>
   </div>
   <div class="tableRow">
     <div class="tableCell first">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell last">stuff</div>
   </div>
</div>

এখন, সিএসএসের জন্য, আমি সীমাগুলির কাঠামোটি কেবল যেখানেই হওয়া দরকার সেখানে এটি নিশ্চিত করার জন্য সারিগুলির কাঠামোটি সহজভাবে ব্যবহার করি;

.tableWrap {
  display: table;
  }

.tableRow {
  display: table-row;
  }

.tableWrap .tableRow:first-child .tableCell {
  border-top: 1px solid #777777;
  }

.tableCell {
  display: table-cell;
  border: 1px solid #777777;
  border-left: 0;
  border-top: 0;
  padding: 5px;
  }

.tableRow .tableCell:first-child {
  border-left: 1px solid #777777;
  }

এবং voila, একটি নিখুঁত টেবিল। এখন, স্পষ্টতই এটি আপনার ডিআইভিদের প্রস্থগুলিতে (বিশেষত প্রথমটি) মধ্যে 1px পার্থক্য সৃষ্টি করবে, তবে আমার পক্ষে, এটি কখনও কোনও প্রকারের সমস্যা তৈরি করতে পারেনি। যদি এটি আপনার পরিস্থিতিতে হয় তবে আমি অনুমান করি আপনি তখন মার্জিনের উপর আরও নির্ভরশীল হয়ে থাকবেন।

Question 15

আমি এই কোডটি ব্যবহার করে এটি অর্জন করতে সক্ষম হয়েছি:

td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}

Question 16

একটি খুব পুরানো প্রশ্ন, তবে এটিই প্রথম গুগল ফলাফল, সুতরাং যে কেউ এই জুড়ে আসে এবং মোবাইলে উপাদানটির ডান / বামে সীমানাটি পুনরায় যুক্ত করতে মিডিয়া অনুসন্ধান করতে চায় না etc.

আমি যে সমাধানটি ব্যবহার করি তা হ'ল:

.element {
    border: 1px solid black;
    box-shadow: 0 0 0 1px black;
}

এটি কাজ করে কারণ আপনি সীমানা এবং ছায়া দিয়ে তৈরি উপাদানটির চারপাশে একটি 2px সীমানা দেখতে পাবেন। তবে, যেখানে উপাদানগুলি মিলিত হয়, ছায়া ওভারল্যাপ হয় যা এটি 2px প্রশস্ত রাখে;

Question 17

margin:1px;আপনার ডিভ প্রায় কাছাকাছি দেওয়ার কি ?

<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
    <div class="brd"></div>
    <div class="brd"></div>
    <div class="brd"></div>
</body>
</html>

ডেমো

Question 18

আমি তাদের পিছনে অন্য ডিভকে পটভূমি হিসাবে ব্যবহার করতে এবং সমস্ত সীমানা মুছতে পছন্দ করি। আপনার কেবল পটভূমি ডিভের আকার এবং অগ্রভাগ ডিভের অবস্থান নির্ণয় করতে হবে।