একই ব্যাকগ্রাউন্ড-রঙযুক্ত তিনটি ডিভের মধ্যে কীভাবে অদ্ভুত ফাঁকগুলি সরিয়ে ফেলা যায়?

23

আমি এই সমস্যাটি নিয়ে বেশ কিছুক্ষণ লড়াই করছি। বিষয়টি মোবাইল ডিভাইসগুলিতে (অ্যান্ড্রয়েড এবং আইওএস) দেখা যায়, কিছু ডিভাইসকে কিছুটা জুম-ইন করা দরকার be পিসিতে, আমি মোবাইল মোডে স্যুইচ করার সময় ক্রোম ব্রাউজারেও এই বাগটি পুনরুত্পাদন করতে পারি। নীচে বাগটি পুনরুত্পাদন করতে কোডটি ব্যবহার করা হচ্ছে:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

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

প্রত্যাশিত ফলাফলটি একটি ডিভ হবে যা # 553213 রঙের সাথে পূর্ণ হয়। যাইহোক, কিছু মোবাইল ডিভাইসে, তারা তিনটি ডিভের মধ্যে অতিরিক্ত লাইন (বা ফাঁক) প্রদর্শন করে।

ওম আমার আইফোন

আমার পিসিতে, মোবাইল মোড সহ ক্রোম ব্রাউজার ব্যবহার করা

কেউ কি জানেন যে এখানে কী চলছে? এটি কীভাবে হয় এবং কীভাবে এটি ঠিক করা যায় সে সম্পর্কে কোনও ধারণা সত্যই প্রশংসিত হবে।

html css

— এনগুইন ইউ
সূত্র

3

আপনার মার্জিন 0 কেন? আমি পুনরুত্পাদন করতে পারি না, সম্ভবত প্রতিটি ডিভের উপর মার্জিন -1px এ সেট করার চেষ্টা করুন।

— ম্যাডিসন কোর্টো

3

একই অবস্থা. পিসিতে পুনরুত্পাদন করা যায় না। সম্ভবত একটি ফোন ব্রাউজার সমস্যা।

— asprin

3

মোবাইল ব্রাউজারটি সম্ভবত ইস্যু করে

— লুই কিম

3

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

— দান

2

যেহেতু এই সমস্ত ডিভের একই পটভূমি রয়েছে আপনি কেবল তার পরিবর্তে পিতামাতার উপাদানটিতে পটভূমির রঙটি রাখতে পারবেন না?

— মোব

6

আমি এই উত্তর খুঁজে পেয়েছি ।

সুতরাং সমাধান যোগ হয় margin-top: -1px;থেকে top, middleএবং bottomক্লাস।

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
    
    .top, .middle, .bottom {
      margin-top: -1px;
    }

  </style>
</head>
<body>
  <div style="width:300px; height: 300px;">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

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

এবং এটি মোবাইল এবং পিসিতেও দুর্দান্ত দেখাচ্ছে। divগুলি উচ্চতা পরিবর্তন করে না। এটা রয়ে গেছে 300px।

— কিকসি ভিজিলó
সূত্র

5

আমি অনুমান করি এটি পৃষ্ঠার স্কেলগুলির কারণে। এই মেটা ট্যাগটি মাথায় যুক্ত করার চেষ্টা করুন:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

— অ্যালেক্স
সূত্র

4

মন্তব্যগুলি পড়ার পরে আমি দেখেছি যে ম্যাডিসন কুর্তোর একটি পরামর্শ ছিল

margin: -1px;

যা প্রকৃত সমস্যা সমাধানের জন্য নিশ্চিত করা হয়েছিল তবে এটি পৃষ্ঠার অন্যান্য অংশে সমস্যা সৃষ্টি করেছে। সুতরাং, আসল ডিভগুলির জন্য কেবল এই ধারণাটি প্রয়োগ করুন:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top" style="margin: -1px;"></div>
    <div class="middle" style="margin: -1px;"></div>
    <div class="bottom" style="margin: -1px;"></div>
  </div>
</body>
</html>

— লাজোস আরপাদ
সূত্র

3

দিয়ে চেষ্টা করুন background। এটি আমার মোবাইলে কাজ করে:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
    }
    .middle {
      height: 100px;
      }
    .bottom {
      height: 100px;
      }
    div{
      background:#553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

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

আমি জানি না আসল কারণ কি। তবে যখন আমি নীচে চেষ্টা করেছি তখন সাদা রেখার রঙকে কালো রূপান্তরিত করে আমি এই ধারণাটি পেয়েছিলাম:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
    }
    .middle {
      height: 100px;
      background-color: #553213;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
    div:hover{background:#000;}
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

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

উপরের বা নীচে ডিভ উপর ক্লিক করুন

— রিতেশ খন্দেকার
সূত্র

2

এই সমস্যাটির কারণ হতে পারে উপায় display block, inline-blockবিভিন্ন পর্দায় বিভিন্ন ব্রাউজার দ্বারা শৈলীগুলি পরিচালনা করা।

উদাহরণস্বরূপ, inline-blockউপাদানগুলির ডানদিকে একটি অটো ছোট স্থান থাকবে। মানুষ usally এই নেতিবাচক ব্যবহার সমাধান margin-left।

ডিফল্টরূপে, একটি divএকটি blockস্তর উপাদান।

ব্লক স্তরের উপাদানগুলি যেভাবে পরিচালনা করা হচ্ছে তার কারণেই আপনি এই নীচের জায়গার মুখোমুখি হতে পারেন।

inline-blockনেগেটিভ দিয়ে স্থান সমাধানের মতো margin-left,

এই blockস্তরের স্থানটি হয় ব্যবহার করে সমাধান করা যেতে পারে

নেতিবাচক margin-topবা
divএর স্টাইলকে হয় পরিবর্তিত করুন table, table-cellটাইপ করুন বা flexboxCSS ব্যবহার করে টাইপ করুন

— গণেশকুমার কে
সূত্র

2

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .top,
        .middle,
        .bottom {
            min-height: 100px;
            width: 100%;
            background-color: #553213;
            margin-bottom: -6px;
            display: inline-block;
            padding: 15px 0;
        }
    </style>
</head>

<body>
    <div style="width:300px; height: 300px">
        <div class="top"></div>
        <div class="middle"></div>
        <div class="bottom"></div>
    </div>
</body>

</html>

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

— উমাইর
সূত্র

1

এই সমস্যাটি আড়াল করতে একটি ছোট রূপরেখা যুক্ত করুন :

.container > * {
  height: 100px;
  background-color: #553213;
  outline:1px solid #553213;
}

.container {
  width:300px;
  height:300px;
}

<div  class="container">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

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

— তেমনি আফিফ
সূত্র

এটি কাজ করে না

— Nguyen You

@ এনগুইয়েন আপনি কি 1px চেষ্টা করে দেখেন?

— তেমনী আফিফ

1

হা! যাইহোক, আমি রূপরেখা-প্রস্থ 35px এ বৃদ্ধি করার সময় আমি সত্যিই আকর্ষণীয় কিছু পেয়েছি। একগুচ্ছ অদ্ভুত ফাঁক দেখা দেয়।

— Nguyen আপনি

1

কেবল শীর্ষ এবং মাঝের ডিভগুলিতে মার্জিন-নীচে যুক্ত করার চেষ্টা করুন।

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .top {
      height: 100px;
      background-color: #553213;
	  margin-bottom: -2px;
    }
    .middle {
      height: 100px;
      background-color: #553213;
	  margin-bottom: -2px;
    }
    .bottom {
      height: 100px;
      background-color: #553213;
    }
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

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

আশাকরি এটা সাহায্য করবে.

— Allabakash
সূত্র

1

স্টাইলিং ঠিক করতে ডিসপ্লে এবং মার্জিন বটম ব্যবহার করুন।

.top, .middle, .bottom {
    height: 100px;
    background-color: #553213;
    margin-bottom: 5px;
    display: block;
}

— উমাইর
সূত্র

1

স্টাইলিং ঠিক করতে ডিসপ্লে এবং মার্জিন বটম ব্যবহার করুন।

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
  .top, .middle, .bottom {
    height: 100px;
    background-color: #553213;
    margin-bottom: 5px;
    display: block;
}
  </style>
</head>
<body>
  <div style="width:300px; height: 300px">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

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

— উমাইর
সূত্র