ডিভের ভিতরে সীমানা স্থাপন করা হচ্ছে এবং এর কিনারে নয়

Question

আমার একটি <div>উপাদান রয়েছে এবং আমি এটিতে একটি সীমানা রাখতে চাই। আমি জানি আমি লিখতে পারি style="border: 1px solid black", তবে এটি ডিভের দুপাশে 2px যুক্ত করে, যা আমি চাই না।

আমি বরং এই সীমানাটি ডিভের প্রান্ত থেকে -1px করতে চাই। ডিভিটি নিজেই 100px x 100px, এবং আমি যদি কোনও সীমানা যুক্ত করি, তবে সীমান্তটি প্রদর্শিত করার জন্য আমাকে কিছু গণিত করতে হবে।

আমি কি কোনও উপায়ে সীমান্তটি উপস্থিত করে তুলতে পারি এবং নিশ্চিত করুন যে বাক্সটি এখনও 100px (সীমান্ত সহ) থাকবে?

Comments

এটির মূল্যের জন্য, আমি যারা এখানে অফসেটের সাথে অভ্যন্তরীণ সীমানা অনুসন্ধান করতে এসেছি তাদের জন্য একটি সমাধান পোস্ট করেছি

— ড্যানিয়েল্ড

Answer 1

এতে box-sizingসম্পত্তি সেট করুন border-box:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

এটি IE8 এবং উপরের উপর কাজ করে ।

Comments

+1 টি। আরও কিছুটা পটভূমির জন্য: সিএসএস-ট্রিকস / বাক্স

— সাইজিং

কেবলমাত্র এটির সাথে ত্রুটিযুক্ত হ'ল এটি কাজ করার জন্য আপনাকে উচ্চতা ঘোষণা করতে হবে, উচ্চতা ছাড়াই সীমানাটি ব্লকের বাইরে বসে এবং রেন্ডারিংকে (অর্থাৎ উল্লম্ব ছন্দকে) প্রভাবিত করে।

— জার্কার্ক

এটি স্বতন্ত্র সীমান্তের দিকগুলি স্টাইলিংয়ের অনুমতি দেয় না এবং এই ক্ষেত্রে অনেকে সম্পত্তি ব্যবহার করে সম্ভবত খুশি হতে পারে outline।

— লরেঞ্জ লো Sauer

জেরেমাইক্লার্ক নোটটি উত্তরে থাকা উচিত, কারণ উচ্চতা নির্ধারণ না করে কোডটি কাজ করে না। পার্শ্ব-নোট: সর্বোচ্চ-উচ্চতা পাশাপাশি কাজ করে, ততক্ষণ ডিভিটি সেই সম্পত্তি ব্যবহার করছে, যদি উচ্চতা সর্বোচ্চ-উচ্চতায় না পৌঁছায় তবে এটি কাজ করবে না।

বিক্রেতার উপসর্গগুলি box-sizing caniuse.com/#search=box-sizing

— thelostspore

Answer 2

আপনি এর মতো বাক্স-ছায়াও ব্যবহার করতে পারেন:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

উদাহরণ এখানে: http://jsfiddle.net/nVyXS/ (সীমান্ত দেখতে hover)

এটি শুধুমাত্র আধুনিক ব্রাউজারগুলিতে কাজ করে। উদাহরণস্বরূপ: কোনও আইই 8 সমর্থন নয়। আরও তথ্যের জন্য caniuse.com (বাক্স-ছায়া বৈশিষ্ট্য) দেখুন।

Comments

এই সমাধানটিকে পছন্দ করুন কারণ এটি একটি উচ্চতা সেট নির্বিশেষে বাক্সের ভিতরে সীমানাকে পুরোপুরি রাখে। আপনি যদি এমন সীমানাগুলি চান যা বাক্সের বাইরে কোনওরকম প্রভাব ফেলেনি Perf 2px এর শীর্ষ-সীমানার জন্য সিএসএস এখানে রয়েছে: "ইনসেট 0 পিক্স 2 পিক্স 0 পিক্স 0 পিক্স # ডিডিডি"

— জার্কার্ক

পছন্দসই সমাধান। বিটিডব্লিউ, সমস্ত বড় ব্রাউজার আজ উপসর্গ ছাড়াই প্লেইন বাক্স-ছায়াকে সমর্থন করে।

— পয়েন্টার নুল

একটি খারাপ দিক হ'ল কিছু ব্রাউজারগুলি বাক্স-ছায়া সঠিকভাবে মুদ্রণ করতে ব্যর্থ হয় এবং সর্বদা এটি # 000 হিসাবে মুদ্রণ করে। আপনার পৃষ্ঠাটি মুদ্রণ করতে সক্ষম হতে হবে তবে এটি শো স্টপার হতে পারে।

— রব ফক্স

অসাধারণ! আমি মনে করি এটি প্রথম উত্তরের চেয়ে ভাল।

— এগেমপ্লেয়ার

অন্য সকলকে চেষ্টা করে দেখুন .. এটি গৃহীত উত্তরের চেয়ে ভাল।

— আহসান আরশাদ

Answer 3

সম্ভবত এটি উত্তর বিড়ম্বিত হয়, তবে আমি আমার ফলাফলগুলি ভাগ করতে চাই। আমি এই সমস্যার 2 টি নতুন পদ্ধতির সন্ধান পেয়েছি যা আমি এখানে উত্তরে খুঁজে পাইনি:

box-shadowCSS সম্পত্তির মাধ্যমে অভ্যন্তরীণ সীমানা

হ্যাঁ, বাক্স-ছায়া উপাদানগুলিতে বাক্সের ছায়া যুক্ত করতে ব্যবহৃত হয়। তবে আপনি insetছায়া নির্দিষ্ট করতে পারেন , এটি কোনও ছায়ার মতো অভ্যন্তরের সীমানার মতো দেখায়। আপনাকে কেবল অনুভূমিক এবং উল্লম্ব ছায়া গো সেট করতে হবে 0px, এবং সীমানার প্রস্থের " spread" অংশের সম্পত্তি box-shadowআপনি রাখতে চান want সুতরাং 10px 'অভ্যন্তরীণ' সীমানার জন্য আপনি নিম্নলিখিত লিখবেন:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

এখানে jsFizz উদাহরণ যা box-shadowসীমানা এবং 'সাধারণ' সীমান্তের মধ্যে পার্থক্য চিত্রিত করে । এইভাবে আপনার সীমানা এবং বাক্সের প্রস্থ সীমানা সহ মোট 100px এর।

বাক্স-ছায়া সম্পর্কে আরও: এখানে

সীমারেখা সীমানা সিএসএস সম্পত্তি মাধ্যমে

এখানে অন্য পদ্ধতির উপায় রয়েছে, তবে এইভাবে সীমানাটি বক্সের বাইরে থাকবে। এখানে একটি উদাহরণ । উদাহরণ থেকে নিম্নলিখিত হিসাবে, আপনি সিএসএস outlineসম্পত্তি ব্যবহার করতে পারেন , এমন সীমানা সেট করতে যা উপাদানটির প্রস্থ এবং উচ্চতাকে প্রভাবিত করে না। এইভাবে, সীমার প্রস্থ কোনও উপাদানের প্রস্থে যুক্ত করা হয় না।

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

রূপরেখা সম্পর্কে আরও: এখানে

Comments

রূপরেখার জন্য +1, এটি একটি খুব কার্যকর পদ্ধতি এবং এমনকি আপনার ডাব্লু 3 স্কুল পৃষ্ঠা উল্লেখ করেছে: 8 আইই 8 কেবলমাত্র একটি ডক্টইপিই নির্দিষ্ট করা থাকলে বাহ্যরেখা সম্পত্তি সমর্থন করে »

— আর্মফুট

দ্রষ্টব্য: বাহ্যরেখা সীমানা ব্যাসার্ধকে সম্মতি দেয় না (ক্রোমে পরীক্ষিত)

— নিক

Answer 4

ইয়াহু এটা সত্যিই সম্ভব। আমি এটি খুঁজে পেয়েছি।

নীচে সীমানার জন্য:

div {box-shadow: 0px -3px 0px red inset; }

শীর্ষ সীমানার জন্য:

div {box-shadow: 0px 3px 0px red inset; }

Answer 5

সিউডো উপাদানটি ব্যবহার করুন :

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}

<div class='button'>Hello</div>

::afterআপনাকে ব্যবহার করে নির্বাচিত উপাদানটির ভার্চুয়াল শেষ সন্তানের স্টাইলিং করা হচ্ছে। contentসম্পত্তি একটি বেনামে প্রতিস্থাপন উপাদান তৈরি করে ।

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

এই পদ্ধতির মূল উপাদানগুলির বিষয়বস্তু স্থাপনের উপর প্রভাব ফেলবে না, যা ব্যবহার করা থেকে পৃথক box-sizing: border-box; ।

এই উদাহরণ বিবেচনা করুন:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

এখানে .buttonপ্যারেন্ট উপাদান ব্যবহার করে প্রস্থ সীমাবদ্ধ। সেট border-left-widthadjusts সামগ্রী-বক্স আকার এবং এইভাবে লেখার অবস্থান।

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

সিউডো-এলিমেন্ট পদ্ধতির ব্যবহারটি সামগ্রী-বাক্সের আকারকে প্রভাবিত করে না।

অ্যাপ্লিকেশনটির উপর নির্ভর করে সিউডো-এলিমেন্ট ব্যবহার করে পন্থাটি পছন্দসই আচরণ হতে পারে বা নাও হতে পারে।

Comments

পারফেক্ট! আমি দেখেছি এই আপনি এটি ব্যবহার করার দরকার হয় কাজ :Before।

— স্পাস্টিনিঞ্জ

বিশিষ্ট! একমাত্র সমাধান যা আমার জন্য গ্যালারী চিত্রযুক্ত অ্যাঙ্কর ট্যাগে কাজ করেছিল। আমি এটিকে পছন্দ করি না এটি চিত্রটি কমিয়ে দেয় না, তবে পরিবর্তে দৃশ্যগুলি ক্লিপ করে।

— রাইসার্ড জ্যাড্রাজিক

Answer 6

যদিও এই প্রশ্নটি ইতিমধ্যে সংস্থাগুলি box-shadowএবং outlineবৈশিষ্ট্যগুলি ব্যবহার করে সমাধানের যথাযথভাবে জবাব দেওয়া হয়েছে , আমি যারা এখানে অবতরণ করেছে তাদের জন্য আমি এই বিষয়টি নিয়ে সামান্য প্রসারিত করতে চাই (আমার মতো) অফসেটের সাথে অভ্যন্তরীণ সীমান্তের সমাধান অনুসন্ধান করতে চাইলে

সুতরাং আসুন আমরা বলি যে আপনার কাছে একটি কালো 100px x 100px রয়েছে divএবং আপনার এটি একটি সাদা সীমানার সাথে অন্তর্ভুক্ত করতে হবে - যার অভ্যন্তরীণ অফসেট 5px রয়েছে (বলুন) - এটি উপরের বৈশিষ্ট্যগুলি দিয়ে এখনও করা যেতে পারে।

বক্স ছায়া

এখানে কৌশলটি জানতে হবে যে একাধিক বাক্স-ছায়া অনুমোদিত, যেখানে প্রথম ছায়া শীর্ষে রয়েছে এবং পরবর্তী ছায়ায় কম জেড-অর্ডারিং রয়েছে।

সেই জ্ঞানের সাথে বাক্স-ছায়ার ঘোষণাটি হবে:

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}

<div></div>

মূলত, যে ঘোষণাটি বলছে তা হ'ল: সর্বশেষ (10 পিক্স সাদা) ছায়া রেন্ডার করুন, তারপরে তার উপরের 5px কালো ছায়াকে রেন্ডার করুন।

আউটলাইন -অফসেট সহ রূপরেখা

উপরের মত একই প্রভাবের জন্য বাহ্যরেখার ঘোষণাগুলি হ'ল:

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}

<div></div>

এনবি: এটি আপনার পক্ষে গুরুত্বপূর্ণ হলে outline-offset আইই সমর্থন করে না ।

---

কোডপেন ডেমো

Answer 7

আপনি নিয়মিত ব্যবহারের পরিবর্তে বৈশিষ্ট্যগুলি outlineএবং outline-offsetনেতিবাচক মান সহ ব্যবহার করতে পারেন border, আমার জন্য কাজ করে:

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}

Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>

Comments

আপনাকে ধন্যবাদ, এই উত্তরটি 2019 এ আমার দিনটি বাঁচিয়েছিল :)

— অ্যালেক্স

সুন্দর! এটি "এক" হওয়া উচিত!

— পেড্রো ফেরেরিরা 12

Answer 8

আমি জানি এটি কিছুটা পুরানো, তবে যেহেতু "সীমান্তের অভ্যন্তর" কীওয়ার্ডগুলি সরাসরি এখানে আমাকে অবতরণ করেছে, তাই আমি এখানে কিছু অনুসন্ধানগুলি ভাগ করতে চাই যা এখানে উল্লেখযোগ্য worth আমি যখন হোভার স্টেটে একটি সীমানা যুক্ত করছিলাম তখন ওপি যেসব প্রভাব নিয়ে কথা বলছে তা আমি পেয়েছি। সীমান্তের বিজ্ঞাপনগুলির বাক্সের মাত্রায় পিক্সেল যা এটিকে ঝাপটায় করে দিয়েছে। এটির সাথে মোকাবিলা করার জন্য আরও দুটি উপায় রয়েছে যা আই 7 এর জন্যও কাজ করে।

1) ইতিমধ্যে উপাদানটির সাথে একটি সীমানা সংযুক্ত করুন এবং কেবল রঙ পরিবর্তন করুন। এইভাবে গণিত ইতিমধ্যে অন্তর্ভুক্ত করা হয়েছে।

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2) আপনার সীমানাকে নেতিবাচক মার্জিন দিয়ে ক্ষতিপূরণ করুন। এটি এখনও অতিরিক্ত পিক্সেল যুক্ত করবে, তবে উপাদানটির অবস্থানটি তত্পর হবে না

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

Answer 9

নতুন এবং পুরানো ব্রাউজারগুলির মধ্যে ধারাবাহিকভাবে রেন্ডারিংয়ের জন্য, একটি ডাবল ধারক যুক্ত করুন, প্রস্থের সাথে বাইরের, সীমানার সাথে অভ্যন্তরীণ।

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

এটি স্পষ্টতই কেবল তখনই যদি আপনার নির্দিষ্ট প্রস্থ অতিরিক্ত মার্কআপের চেয়ে বেশি গুরুত্বপূর্ণ!

Answer 10

আপনি যদি বাক্স-আকার পরিবর্তন করেন: সীমান্ত-বাক্সের অর্থ কেবল বর্ডার, প্যাডিং, মার্জিন ইত্যাদি নয় সমস্ত উপাদান প্যারেন্ট উপাদানগুলির মধ্যে চলে আসবে।

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

Comments

কী হল সেই উক্তি

— Chud37

Answer 11

@ স্টিভ বলেছে যে সেরা ক্রস ব্রাউজার সমাধান (বেশিরভাগই আইই সমর্থনের জন্য) তার চারপাশে সীমানা 1px যুক্ত করার চেয়ে প্রস্থ এবং উচ্চতায় একটি ডিভ 98px করা বা আপনি ডিভিড 100x100 পিক্সের জন্য একটি পটভূমি চিত্র তৈরি করতে এবং এর উপর একটি সীমানা আঁকতে পারেন।

Answer 12

আপনি অফসেটের সাথে আউটলাইনটি দেখতে পারেন তবে আপনার ডিভিতে এটির জন্য কিছু প্যাডিং প্রয়োজন। অথবা আপনি একেবারে ভিতরে একটি সীমানা ডিভ অবস্থান করতে পারেন something

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

আপনার পছন্দমতো ফিট করার জন্য আপনাকে জাল বর্ডার ডিভের উপর মার্জিনের সাথে ঝাঁকুনির দরকার পড়তে পারে।

Answer 13

আরও আধুনিক সমাধান হতে পারে সিএসএস variablesএবং calc। calcব্যাপকভাবে সমর্থিত তবে variablesআইই 11 এ এখনও নেই (পলিফিল উপলব্ধ)।

:root {
  box-width: 100px;
  border-width: 1px;
}

#box {
  width: calc(var(--box-width) - var(--border-width));
}

যদিও এটি কিছু গণনা ব্যবহার করে যা মূল প্রশ্নগুলি এড়াতে চেয়েছিল। আমি মনে করি এটি গণনাগুলি ব্যবহার করার উপযুক্ত সময় কারণ সেগুলি সিএসএস দ্বারা নিয়ন্ত্রিত হয়। এটির জন্য অতিরিক্ত মার্কআপ বা অন্য সিএসএস বৈশিষ্ট্যগুলির অপব্যবহারের প্রয়োজন নেই যা পরে প্রয়োজন হতে পারে।

একটি নির্দিষ্ট উচ্চতার প্রয়োজন না হলে এই সমাধানটি কেবল সত্যই কার্যকর ।

Answer 14

একটি সমাধান যা আমি উপরে বর্ণিত দেখিনি তা হ'ল আপনার ইনপুটটিতে প্যাডিং রয়েছে, যা আমি 99% সময় করে। আপনি এর লাইনে কিছু করতে পারেন ...

input {
  padding: 8px;
}

input.invalid {
  border: 2px solid red;
  padding: 6px; // 8px - border or "calc(8px - 2px)"
}

আমি এটি সম্পর্কে যা পছন্দ করি তা হ'ল আমার কাছে প্রতিটি পাশের সীমানা + প্যাডিং + ট্রানজিশনের বৈশিষ্ট্যের পুরো মেনু রয়েছে।