যখন 1 পিক্সেল বর্ডারটি ডিভের সাথে যুক্ত করা হয়, ডিভ আকার বৃদ্ধি পায়, এটি করতে চাই না

Question

আমি ক্লিক করে আমি যোগ করছি, ডিভের 1px সীমানা, সুতরাং Div আকার 2px এক্স 2px দ্বারা বৃদ্ধি পায়। আমি ডিভ আকার বৃদ্ধি পেতে চাই না। এটি করার কোনও সহজ উপায় আছে?

অগোছালো বিশদ বিবরণ
আসলে আমি একটি ভাসা-ডিভের সাথে ভাসা: বাম (একই আকার, আইকনের মতো) সাথে ডিআইভি যুক্ত করছি, সুতরাং সমস্ত একের পর এক স্ট্যাক করে, এবং যখন (ধারক-দ্বি প্রস্থ 300px হয়) কোনও স্থান বাকী প্রস্থ অনুসারে ছেড়ে যায় চাইল্ড ডিআইভিগুলি পরের সারিতে আসে, সুতরাং এটির মতো ক্যাটালগ, তবে সীমানার কারণে কেবল নির্বাচিত ডিআইভি আকার বৃদ্ধি পায়, নির্বাচিত ডিআইভির অধীনে ডিআইভি ডানদিকে যায় এবং নির্বাচিত ডিআইভির নীচে ফাঁকা স্থান তৈরি করে।

সম্পাদনা:
নির্বাচনের ক্ষেত্রে উচ্চতা / প্রস্থ হ্রাস করা হচ্ছে, তবে কীভাবে এটি বাড়ানো যায়। কিছু তৃতীয় পক্ষের কাঠামো ব্যবহার করা হচ্ছে, সুতরাং ডিআইভি নির্বাচন হারাতে গেলে ইভেন্ট হবে না ..

Comments

stackoverflow.com/questions/9601357/…

— গার্থ বেকার

Answer 1

সীমান্ত CSS সম্পত্তি সমস্ত উপাদানের "বাহ্যিক" আকার বাড়িয়ে তুলবে, টেবিলগুলিতে টিডিএস বাদ দেয়। এইচটিএমএল-> লেআউট ট্যাবের অধীনে ফায়ারব্যাগে (কীভাবে বন্ধ ) এটি কীভাবে কাজ করে তার একটি ভিজ্যুয়াল ধারণা পেতে পারেন ।

যেমন একটি উদাহরণ, 10px প্রস্থ এবং উচ্চতা এবং 1px এর সীমানা সহ একটি ডিভের বাইরের প্রস্থ এবং উচ্চতা 12px হবে।

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

উদাহরণ:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

Comments

থানেক্স, আমার কাছে .ড্রাগ্রপ-নির্বাচিত শ্রেণি ছিল তবে এটি সমস্ত ড্র্যাগেবল অবজেক্ট ব্যবহার করেছিল এবং আমার কাছে ড্র্যাগেবল অবজেক্টের 3 টি আলাদা আকার (3 টি বিভিন্ন ধরণের) ছিল, তাই আমি .ড্রাগ্রপ-সিলেক্টে সমস্ত 3 এবং সেট প্যাডিংগুলিতে একই প্যাডিং রাখি। . & এটা কাজ করেছে. :)

— নচিকেট

প্রতিক্রিয়াশীল ডিজাইনের জন্য এটি ভাল সমাধান নয়। outlineব্যাকগ্রাউন্ডের মতো একই রঙের একটি সীমানা ব্যবহার করা (এবং নির্বাচনের সময় এর রঙ পরিবর্তন করা অন্য কিছুতে আরও নমনীয়)।

— AliBZ

তবে ধরুন, উপাদানটি প্রবাহিত করতে বা ভিউ-বন্দর প্রস্থটিতে প্রতিক্রিয়া জানাতে আপনার প্রস্থকে কঠোর কোডিং এড়ানো দরকার: আমার উত্তরটি ব্যবহার করে দেখুনborder-color: transparent

— এডওয়ার্ড নেওল

এই গণনার দরকার নেই, কেবল বক্স-সাইজিং বর্ডার-বক্সে সেট করুন। দেখুন নিচের ejfrancis 'উত্তর , এবং দেখুন এই নিবন্ধটি ।

— jbyrd

আপনি কি টেবিলের টিডি সম্পর্কে নিশ্চিত? ক্রোমে এটি এখনও আকারে যুক্ত হবে বলে মনে হচ্ছে।

— রক্ষক এক

Answer 2

এটি এই দৃশ্যেও সহায়ক। এটি আপনাকে ডিভ প্রস্থ পরিবর্তন না করে সীমানা সেট করার অনুমতি দেয়

textarea { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

Http://css-tricks.com/box-sizing/ থেকে নেওয়া

Comments

বক্স-সাইজিং: বর্ডার-বক্সকে একটি আধুনিক সেরা অনুশীলন হিসাবে সত্যই সেট করা উচিত। Paulirish.com/2012/box-sizing-border-box-ftw

— jbyrd

এটি কিছু ক্ষেত্রে কাজ করে বলে মনে হয় না; ঠিক কেন জানি না। দেখুন: codepen.io/anon/pen/QZaBQG

— উইলসন বড়স

Answer 3

আপনি ব্যাকগ্রাউন্ডের মতো একই রঙ হতে ক্লিক করার আগে এটিতে একটি সীমানা সেট করুন।

তারপরে আপনি যখন ক্লিক করবেন কেবল পটভূমির রঙ পরিবর্তন করুন এবং প্রস্থ পরিবর্তন হবে না।

Comments

প্রতিভাশালী! ইচ্ছে করে আমি নিজেই এটা ভাবতাম

— রিজুল গুপ্ত

হ্যাঁ, তবে যদি আপনার গা colored় রঙিন ব্যাকগ্রাউন্ড না থাকে? আমার উত্তরটি ব্যবহার করে দেখুনborder-color: transparent

— এডওয়ার্ড নেওয়েল

Answer 4

এর outlineপরিবর্তে আরও একটি ভাল সমাধান ব্যবহার করা border। এটি বক্স মডেলকে প্রভাবিত না করে একটি সীমানা যুক্ত করে। এটি IE8 +, ক্রোম, ফায়ারফক্স, অপেরা, সাফারিতে কাজ করে।

( https://stackoverflow.com/a/8319190/2105930 )

Comments

এটি দুর্দান্ত, তবে সীমান্তের সাথে তুলনা করে কোনও "রূপরেখা-বাম, ..." নেই, আমার ক্ষেত্রে নয়।

— ইমসকুল

তারপর আমি ব্যবহার করার প্রস্তাব box-shadowপ্রতি আমার অন্যান্য জবাব একটি অনুরূপ প্রশ্নে। এটিতে একই ব্রাউজার সমর্থন নেই, তবে এটি আজকাল কোনও ইস্যুতে কম।

— চৌই

আপনাকে ধন্যবাদ # চৌওয়ে, সবেমাত্র উপলব্ধ হয়ে উঠেছে পাশাপাশি একপাশের box-shadowসীমানা, প্রিফেক্ট সমাধানকেও সমর্থন করতে পারে।

— ইমসকুল

border-color: transparentআরও ভাল ক্রস ব্রাউজার সমর্থন আছে --- আমার উত্তর দেখুন ...

— এডওয়ার্ড নেওয়েল

এই মন্তব্যের আন্ডার-রেটেড। কোনও উপাদানটির আকার পরিবর্তন না করেই এটি একটি সীমানা পাওয়ার দুর্দান্ত উপায় It's

— সেবাস্তিয়ান নেমেথ

Answer 5

পরিবর্তন করার চেষ্টা করুন borderথেকে outline:

outline: 1px solid black;

Comments

আপনার সীমানা ব্যাসার্ধ না থাকলে কাজ করে।

— জিন-মেরি ডালমাসো

Answer 6

এই সমাধানগুলির অনেকগুলি ব্যবহার করে, আমি সেটিংসের কৌশলটি border-color: transparentসবচেয়ে নমনীয় এবং ব্যাপক-সমর্থিত হিসাবে দেখতে পাই :

.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

কেন এটি ভাল:

• উপাদানটির প্রস্থকে হার্ড-কোড করার দরকার নেই
• দুর্দান্ত ক্রস ব্রাউজার সমর্থন (কেবল আই 6 অনুপস্থিত)
• এর বিপরীতে outline, আপনি এখনও নির্দিষ্ট করতে পারেন, উদাহরণস্বরূপ, উপরে এবং নীচের সীমানাগুলি আলাদাভাবে
• পটভূমির সীমানা রঙটি সেট করার মতো নয়, আপনি যদি পটভূমিটি পরিবর্তন করেন তবে এটি আপডেট করার দরকার নেই এবং এটি অ-কঠিন রঙিন ব্যাকগ্রাউন্ডের সাথে সামঞ্জস্যপূর্ণ।

Comments

আমি আমার ইউএক্সে গতিশীল আকারের আইটেমগুলির সাথে এটি সেরা কাজ করতে দেখেছি। সম্পূর্ণরূপে মাউসওভারে আকার-স্থানান্তর ঘটছে! ধন্যবাদ মিঃ নেওল!

— d3r3kk

সদয়। তোমাকে ধন্যবাদ!

— হ্যারাল্ড হোয়ারউইক

এটাই সেটা!

— সত্য 14

transparentএটাই কি দরকার!

— ডিম্পিয়াक्स

এটিই আমার প্রয়োজন (ওয়াই)

— হ্যাক্স্সানআরাক্সা

Answer 7

এটা চেষ্টা কর

box-sizing: border-box;

Comments

এটি উত্তর হতে হবে, ময়লা সহজ।

— স্পিট

কেন এটি সর্বত্র কাজ করে না? উদাহরণস্বরূপ কোডেপেন.আইও

— টম

হাই @ টম, আমি এখনও নিশ্চিত না কেন এটি এখনও কাজ করে না। তবে আপনার ক্ষেত্রে দয়া করে ধারকটির উচ্চতা সরিয়ে ফেলার পরিবর্তে প্যাডিং বিবেচনা করুন। আপনার সমস্যা সমাধান করতে পারে।

— হোয়াং ট্রুং

Answer 8

আমি সাধারণত এই সমস্যাটি সমাধান করার জন্য প্যাডিং ব্যবহার করি। সীমানা অদৃশ্য হয়ে গেলে এবং সীমানা প্রদর্শিত হলে সরানো হবে। কোডের উদাহরণ:

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

জেএসফিডেলে আমার সম্পূর্ণ নমুনা কোডটি দেখুন: https://jsfiddle.net/3t7vyebt/4/

Comments

আপনি কি আমাকে বলতে পারবেন আসলে কী হচ্ছে, আমি বিভ্রান্ত হয়ে পড়েছি, যখন আপনি তার উপর দিয়ে ঘুরে বেড়াচ্ছেন তখন কেন খারাপ সীমানায় নীচে নেমে আসে?

— সুরজ জৈন

@ সুরজজাইন কারণ আপনি যখন এটি ঘুরে দেখেন তখন "খারাপ সীমান্ত" ডিভের আকার পরিবর্তন হবে (সীমান্তের 1px যোগ করুন)।

— থো

Answer 9

সীমা-প্রস্থের দ্বিগুণ দ্বারা প্রস্থ এবং উচ্চতা হ্রাস করুন

Answer 10

ইনসেট শ্যাডো সহ আপনি কিছু অভিনব জিনিস করতে পারেন। কোনও উপাদানটির আকার পরিবর্তন না করেই নীচে একটি সীমানা রাখার উদাহরণ:

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}

Answer 11

কখনও কখনও আপনি উচ্চতা বা প্রস্থকে পরিষ্কারভাবে সেট না করেই প্রভাবিত করতে চান না। সেক্ষেত্রে আমি সিউডো উপাদানগুলি ব্যবহার করা সহায়ক বলে মনে করি।

.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

আপনি ছদ্ম উপাদানটির সাথে আরও অনেক কিছু করতে পারেন তাই এটি একটি দুর্দান্ত শক্তিশালী নিদর্শন।

Comments

আমি যে আমি 2px পরিবর্তন করতে চেয়েছিলেন একটি 1px সীমান্ত ছিল, এবং একমাত্র উপায় আমি কি করতে খুঁজে পাইনি যে সরিয়ে ছিল widthএবং heightএবং একটি যোগ bottomএবং leftছাড়াও সম্পত্তি topএবং leftসব যা বিপরীত প্রস্থ এ সেট করা উচিত, মূল সীমানা (আমার ক্ষেত্রে -1px)। দুর্দান্ত হ্যাক যদিও

— চেজ স্যান্ডম্যান

Answer 12

আপনি যখন সীমানা বাড়ান তখন মার্জিনের আকার হ্রাস করার চেষ্টা করুন

Answer 13

ক্লাস যুক্ত করে যে কোনও উপাদানকে "সীমানা" তৈরি করতে সক্ষম হওয়া এবং এর মাত্রাগুলি প্রভাবিত করার দরকার নেই I আমার জন্য ভাল সমাধান ছিল বাক্স-ছায়া ব্যবহার করা। তবে কিছু ক্ষেত্রে অন্যান্য ভাইবোনদের কারণে প্রভাবটি দৃশ্যমান হয়নি। তাই আমি উভয় টিপিকাল বাক্স-ছায়ার পাশাপাশি ইনসেট বক্স-ছায়া সংযুক্ত করেছিলাম। ফলাফলটি কোনও মাত্রা পরিবর্তন না করেই একটি সীমান্ত চেহারা।

কমা দ্বারা পৃথক করা মান। এখানে একটি সাধারণ উদাহরণ:

.add_border {
    box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}

jsfiddle

আপনার পছন্দসই চেহারাটির জন্য সামঞ্জস্য করুন এবং আপনি যেতে ভাল!

Answer 14

আমরা CSS ক্যালক () ফাংশনও ব্যবহার করতে পারি

width: calc(100% - 2px);

সীমানার জন্য 2px বিয়োগ করা

Answer 15

.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}

Comments

আমি মনে করি এটি ওপি এবং আরও দর্শনার্থীদের জন্য আরও সহায়ক হবে, যখন আপনি নিজের ঘনিষ্ঠতার জন্য কিছু ব্যাখ্যা যোগ করেন।

— রিপোর্টার

Answer 16

আপনি আপনার পটভূমির একই রঙের সীমানা সহ উপাদানটি তৈরি করতে পারেন, তারপরে আপনি যখন সীমান্তটি প্রদর্শন করতে চান, কেবল তার রঙ পরিবর্তন করুন।

Comments

হ্যাঁ, তবে ধরুন আপনার পটভূমিটি কোনও দৃ color় রঙ নয় ... ব্যবহারের ভিত্তিতে আমার প্রতিক্রিয়া দেখুনborder-color: transparent

— এডওয়ার্ড নেওয়েল

বা সমস্ত একসাথে পছন্দ করুনul li a{border-bottom:2px solid transparent;} ul li a:hover{border-bottom:2px solid red;}

— স্ট্যাকন্ডারফ্লো

Answer 17

আপনার বিষয়বস্তুগুলি divগতিময়ভাবে রেন্ডার করা হয় এবং আপনি এর উচ্চতা নির্ধারণ করতে চান তবে আপনি একটি সহজ কৌশল ব্যবহার করতে পারেন outline:

button {
    padding: 10px;
    border: 4px solid blue;
    border-radius: 4px;
    outline: 2px solid white;
    outline-offset: -4px;
}

button:hover {
    outline-color: transparent;
}

উদাহরণ এখানে: https://codepen.io/Happysk/pen/zeQzaZ

Comments

রূপরেখার দুর্ভাগ্যক্রমে গোলাকার কোণগুলি নেই :(

— এম

Answer 18

আপনি একটি বাক্স-ছায়া ইনসেট চেষ্টা করতে পারেন

এর মতো কিছু: বাক্স-ছায়া: ইনসেট 0px -5px 0px 0px #fff

আকার না বাড়িয়ে উপাদানটির নীচে একটি সাদা 5px সীমানা যুক্ত করে