সিএসএস 3 বক্স-সাইজিং: মার্জিন-বক্স; কেন না?

Question

আমাদের নেই কেন box-sizing: margin-box;? সাধারণত যখন আমরা box-sizing: border-box;আমাদের স্টাইলের শীট রাখি তখন আমরা সত্যিকার অর্থে পূর্বেরটিকে বোঝি।

উদাহরণ:

ধরা যাক আমার 2 কলাম পৃষ্ঠার বিন্যাস রয়েছে। উভয় কলামের প্রস্থ 50%, তবে এগুলি কোনও কুশ্রী দেখাচ্ছে কারণ কোন জাল নেই (মাঝখানে ফাঁক); সিএসএসের নীচে:

.col2 {
    width: 50%;
    float: left;
}

নর্দমা প্রয়োগ করতে আপনি মনে করতে পারেন যে আমরা 2 টি কলামের প্রথমটিতে ঠিক একটি মার্জিন সেট করতে পারি; এটার মতো কিছু:

.col2:first-child {
    margin-right: 24px;
}

তবে এটি দ্বিতীয় কলামটিকে একটি নতুন লাইনে আবৃত করবে, কারণ নিম্নলিখিতটি সত্য:

50% + 50% + 24px > 100%

box-sizing: margin-box;উপাদানটির গণিত প্রস্থে মার্জিন অন্তর্ভুক্ত করে এই সমস্যাটি সমাধান করবে। আমি এর চেয়ে বেশি দরকারী না হলে এটি খুব দরকারী বলে মনে করি box-sizing: border-box;।

Comments

"আমাদের নেই কেন box-sizing: margin-box;?" কারণ অনুভূমিক মার্জিনগুলি ভেঙে পড়েনি, যেমন একটি প্রস্তাব উল্লম্ব মার্জিন ধসের সাথে মারাত্মকভাবে হস্তক্ষেপ করবে। যাইহোক, আপনি যদি মানকতার জন্য কিছু প্রস্তাব করতে চান তবে স্ট্যাক ওভারফ্লো সঠিক জায়গা নয়। মেলিং তালিকাগুলি চেষ্টা করুন।

— BoltClock

নির্দিষ্ট পরিস্থিতিতে border: xxx solid transparent;সীমান্তটি অন্তর্ভুক্ত থাকায় আপনি ব্যবহার করে এটি পেতে পারেন border-box। এটি যদিও কিছু অন্যান্য বিষয়গুলি ভঙ্গ করবে box-shadow।

— নাথান ওসমান

আমরা কি এখন "অ-গঠনমূলক" হিসাবে মান সম্পর্কে সমস্ত প্রশ্ন বন্ধ করে দিচ্ছি ?? এটি জিজ্ঞাসা করার জন্য একটি সুস্পষ্ট প্রশ্ন এবং এটির একটি সরল উত্তরও রয়েছে: আমাদের কাছে নেই box-sizing: margin-boxকারণ এটি মার্জিন-ভেঙে পড়া দিয়ে কাজ করবে না।

— থোমাসরুটটার

@ থোমাস্রুটটার: এটি বন্ধ করার সময় এর জন্য এর চেয়ে ভাল কথার কারণ আর ছিল না, যা এক বছর আগের চেয়ে বেশি ছিল। যাইহোক, "গঠনমূলক নয়" এখন চলে গেছে (যার অর্থ না, আমরা আসলে আর গঠনমূলক হিসাবে কিছুই বন্ধ করি না) এবং পুরোটি থেকে "আমার ধারণা আছে, এটি কীভাবে কাজ করে তা এখানে আসুন এটি একটি স্ট্যান্ডার্ড করা যাক!" এটি সর্বশেষ বন্ধ হওয়ার পরে জিনিসটি সরিয়ে ফেলা হয়েছে এখন এটি আসলে বাস্তবের মতো মনে হচ্ছে "কেন এক্স কাজ করতে পারে না?" প্রশ্ন। এটি এখনও একটি অবিশ্বাস্যভাবে অনুমানমূলক প্রশ্ন (উপরে আমার যুক্তি আসলে শিক্ষিত অনুমান ছাড়া আর কিছুই নয়), তবে আমি এ বিষয়ে আরও মন্তব্য করি না।

— বোল্টক্লক

কেন শুধু একটি ভেতরের-মোড়ানো / p নেই যদি তোমরা ব্যবধান চাই: codepen.io/chriscoyier/pen/eGcLw

— অ্যাশলে

Answer 1

আপনি width: calc(50% - 24px);আপনার কলস ব্যবহার করতে পারবেন না ? তারপরে আপনার মার্জিন সেট করুন।

Comments

এটি অত্যন্ত ব্রাউজার-নির্ভর। সম্ভবত 2020 এর কাছাকাছি ie15 এটি সমর্থন করবে এবং আপনাকে এটি আপনার কাজের ক্ষেত্রেও ব্যবহার করতে দেওয়া হবে :-(

— পিটার - মনিকা পুনরায় ইনস্টল করুন 25'13

ফায়ারফক্সে এত ভাল কাজ করছে বলে মনে হচ্ছে না? (বা অন্য কিছু আমি করিনি)

— লরেনগাইনার

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

— BoltClock

হ্যাঁ ... ... বিশেষভাবে একটি উত্তর সাড়া দেওয়ার জন্য ক্যালক () হিসাবে কাজের উত্তর হিসাবে পরামর্শ দেওয়া হচ্ছে।

— মরগান Feeney

এটি নির্দিষ্ট উদাহরণে প্রযোজ্য কিনা তা নিশ্চিত না তবে আমাদের দৃশ্যে (এফএফ 53.0.3 হিসাবে) ক্যালক () ব্যবহারের ক্ষেত্রে একটি বড় নেতিবাচক বিষয়টি হল যে এর আচরণটি প্রস্থের সাথে সাদৃশ্যপূর্ণ নয়: এক্স%; আমরা "ক্যালক" দেখতে পাই যা থেকে কোনও স্ট্যাটিক এক্সপিএক্সকে প্রাথমিক রেন্ডারিংয়ের সময় করা হয়। এর অর্থ হ'ল প্রস্থের বিপরীতে: X%, ক্যালকা'যুক্ত কলামটি ধারক আকারের সাথে স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করে না।

— পঞ্চো

Answer 2

আমি মনে করি আমরা একটি থাকতে পারে box-sizing: margin-box। সিএসএস বক্স মডেল হুবহু দেখায়, ফ্রেমের মার্জিনগুলির অবস্থানগুলি কী।

ছোটখাটো সমস্যা রয়েছে - উদাহরণস্বরূপ, মার্জিন বাক্সগুলি ওভারল্যাপ করতে পারে - তবে সেগুলি সমাধান করা শক্ত নয়।

আমি মনে করি, পরিস্থিতি একই রকম, যেমন আমরা overflow-x& overflow-yসংযুক্তিগুলির সাথে দেখতে পাচ্ছি , টেবিল-কোষগুলিতে বিস্মৃত অবস্থানযুক্ত ডিভগুলি বাক্স-আকারের সাথে ন্যূনতম | সর্বোচ্চ-প্রস্থ | উচ্চতার সংমিশ্রণ সহ, এবং আরও কিছু।

এমন বৈশিষ্ট্যগুলি রয়েছে, সত্যিই সাধারণ বৈশিষ্ট্য যা ব্রাউজার বিকাশকারীরা কেবল বিকাশ করে না।

আইএমএইচও, box-sizing: margin-boxখুব দরকারী বৈশিষ্ট্য ছিল। আর একটি দরকারী বৈশিষ্ট্য box-sizing: padding-boxহ'ল, এটি কমপক্ষে স্ট্যান্ডার্ডে বিদ্যমান, তবে এটি কোনও বড় ব্রাউজারে প্রয়োগ করা হয়নি। এমনকি নতুন ক্রোমেও নেই!

---

দ্রষ্টব্য: @ অরিওলের মন্তব্য: ফায়ারফক্স বক্স-সাইজিং: প্যাডিং-বক্স বাস্তবায়ন করেছে। তবে অন্যরা তা করেনি এবং এটি অনুমান থেকে সরানো হয়েছে। ফায়ারফক্স এটিকে 50 সংস্করণে সরিয়ে ফেলবে Sad

Comments

ফায়ারফক্স বাস্তবায়ন করেছে box-sizing: padding-box। তবে অন্যরা তা করেনি এবং এটি অনুমান থেকে সরানো হয়েছে। ফায়ারফক্স এটিকে 50 সংস্করণে সরিয়ে ফেলবে Sad

— ওরিওল

Answer 3

শীর্ষে থাকা লোকটি প্যাডিং এবং সীমান্ত সহ সামগ্রিক প্রস্থে মার্জিন যুক্ত করার বিষয়ে জিজ্ঞাসা করছে। জিনিসটি হ'ল, মার্জিনটি বাক্সের বাইরে প্রয়োগ করা হয় এবং ব্যবহারের সময় প্যাডিং এবং বর্ডার হয় না border-box।

আমি border-marginধারণাটি অর্জনের চেষ্টা করেছি । আমি যা পেয়েছি তা হ'ল মার্জিন ব্যবহার করে আপনি হয় .lastশেষ আইটেমটিতে একটি শ্রেণি যুক্ত করতে পারেন (মার্জিন সহ, তারপর শূন্যের মার্জিন প্রয়োগ করুন, বা ব্যবহার করুন :last-child/:last-of-type)। বা চারপাশে সমান মার্জিন যুক্ত করুন (উপরের প্যাডিং সংস্করণের অনুরূপ)।

উদাহরণগুলি এখানে দেখুন: http://codepen.io/mofeenster/pen/Anidc

border-boxসামগ্রীর প্রস্থ হিসাবে তার প্যাডিং + এর সীমানার প্রস্থের প্রস্থ গণনা করে। সুতরাং আপনার যদি 2 divটি থাকে যা 50% প্রশস্ত, তারা সংলগ্ন হবে। আপনি যদি 8pxএগুলিতে প্যাডিং যুক্ত করেন তবে আপনার কাছে একটি গিটার থাকবে 16px। মোড়কের উপাদানটির সাথে এটি একত্রিত করুন - যার প্যাডিং রয়েছে 8px- আপনার চারপাশে সমান জালের সাথে সুন্দরভাবে সাজানো গ্রিড থাকবে।

এই উদাহরণটি এখানে দেখুন: http://codepen.io/mofeenster/pen/vGgje

দ্বিতীয়টি আমার প্রিয় পদ্ধতি।

Answer 4

আমি নিশ্চিত যে এগুলি সবই সুস্পষ্ট, তবে আমি এটিকে যাইহোক টাইপ করব কারণ ... ভাল, আমার অনুশীলনটি দরকার। নিম্নলিখিত ফলাফলগুলি ঠিক তেমন দক্ষ হবে না box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizingকোন বিন্দু থেকে প্যাডিং এবং সীমানা উপাদানটির সামগ্রিক আকারে মূল্যায়ন করা হয় তা নিয়ন্ত্রণ করতে ব্যবহৃত হয়। সুতরাং যখন প্রস্থের pxসাথে মার্জিনগুলি অন্তর্ভুক্ত করা কোশার নয় %(যেমনটি সর্বদা সাধারণত হয়) তবে আপেক্ষিক শতাংশের পরিমাণটি কী হওয়া উচিত তা গণনা করা সহজ কারণ আপনাকে সংজ্ঞায়িত প্রস্থে প্যাডিং এবং সীমানা একত্রীকরণ করতে হবে না।

Comments

মার্জিন-বক্সের মতো কোনও কিছুর জন্য ব্যবহারের ক্ষেত্রে হ'ল পিক্সেল মার্জিনের সাথে শতাংশের প্রস্থের মিশ্রণ সক্ষম করা। যদি আপনি তাদের মধ্যে 1px মার্জিন সহ দুটি 50% বাক্স চান, তবে এটি 1% এর অনুরূপ 1% এর মার্জিনের সাথে সম্পন্ন করা যায় না - কিছু ছোট পর্দার আকারগুলি 1% থেকে 0 পিক্সেলের নীচে হয়ে যায় এবং হঠাৎ আপনার কোনও মার্জিন থাকে না। আমাদের আসলে যা দরকার তা হ'ল @ স্লুচ শো বা ফ্লেক্সবক্স মডেল হিসাবে ক্যালক () এর জন্য আরও ব্রাউজার সমর্থন।

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

— বরফ

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

— সীমাহীন

আমি আপনার বক্তব্য বুঝতে পারি না। হাতের মুঠোয় সমস্যাটি ছিল px এবং% কারণের সাথে লাইন বিরতি কারণ মার্জিন আকারের গণনায় অন্তর্ভুক্ত নয়। কোনও মার্জিন কোনও উপাদানের আকারের সাথে অন্তর্ভুক্ত থাকে না, এটি এমন একটি স্থান যা আপনি কোনও উপাদানটির চারপাশে প্রদর্শিত হতে চান। এছাড়াও, margin-boxবহুমাত্রিক মার্জিন গণনাগুলি কীভাবে পরিচালনা করবে ? @mediaব্রেকপয়েন্টস max-widthএবং min-widthঠিক কাজ করে। আমার ধারণা margin-box, কিছু ফোলা কমে যেতে পারে তবে এটিকে অপ্রয়োজনীয় বলে মনে করার কারণও পাব get

— প্লামার

কেন কেউ উল্লেখ করছেন না যে এই মার্জিন পার্সেন্টেজ ভ্যালু হ'ল কোনও কারণে প্রস্থের শতাংশ ... উচ্চতা বা প্রস্থের কোনও বিষয় নয়। পিতামাতার প্রস্থ ব্যবহৃত হয়। যা কমপক্ষে বলার জন্য বিজারে .. তাই উপরের কোডটি কাজ করা উচিত নয় এবং কাজ করে না। আপনি যদি উচ্চতা এবং প্রস্থকে সমান না করেন।

— মুহাম্মদ উমার

Answer 5

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

Comments

আমার ক্ষমাপ্রার্থী তবে আমি বুঝতে পারি না যে "মার্জিন-বাক্স" এর মাধ্যমে স্পেসিয়াল গণনায় প্যাডিং, বর্ডার এবং মার্জিন সহ কীভাবে "সীমান্ত-বাক্স" এর মাধ্যমে প্যাডিং এবং বর্ডার অন্তর্ভুক্ত করার চেয়ে ধারণাটি পৃথক হবে। অবশ্যই এটি একই থিমের একটি বৈকল্পিক?

— পাঁচ

Answer 6

উপর Codrops মার্জিন এবং সারি এর প্রভাব ওভারফ্লো করতে বাধ্য বিষয় ভাল নিবন্ধের একটি দম্পতি আছে। তারা সমস্ত ব্রাউজারের জন্য একটি নরমাল সিএসএস সেটিং ফন্টের আকার 100% এ রিম বা ইম ইউনিট ব্যবহার করার পরামর্শ দেয়, তারপরে আপনি যখন প্রস্থ এবং মার্জিন সেট করেন সহজভাবে জন্য মন্তব্যগুলিতে একটি নোট তৈরি করে সারিটির প্রস্থে প্রভাবটির উপর নজর রাখা সহজ হয় when মোট প্রস্থ। 16px থেকে 1 এম-তে রূপান্তর হ'ল লক্ষ্যযুক্ত ভিউপোর্টগুলি মোট উইথকে গণনা করার উপায়।

কমপক্ষে ডেভ স্টেজের জন্য এর মতো কাজ করা এবং তারপরে আপনি যদি 'প্রতিক্রিয়াশীল' টেম্পলেটগুলি চান তবে আপনি প্রস্থের প্রস্থগুলি সহ প্রস্থগুলিকে% এ রূপান্তর করতে পারেন।

অন্যান্য এবং প্রায়শই সহজ উপায় তারা ময়দার হ্যান্ডেল করার পরামর্শ দেয় তা হল সিউডো পরে এবং content: '';আপনার প্রতিটি কলামে যা আমি খুঁজে পেয়েছি তা সত্যই ভাল কাজ করে। আপনি যদি একটি ডিভি ক্লাস সেট করেন যা সংজ্ঞায়িত শেষ কলাম যেমন শেষের পরে আপনি সেই শ্রেণীটিকে লক্ষ্য করে লক্ষ্য করতে পারেন যে পরে সিউডো না থাকে, বা আরও বিস্তৃত না থাকে; যা আপনার লেআউটের পক্ষে সর্বদা সেরা।

এই সিউডো উপাদান পদ্ধতিটি ব্যবহারের যুক্ত বোনাসটি হ'ল এটি আপনাকে ছায়ার জন্যও একটি লক্ষ্য দেয় যা পাঠকদের মনিটরের উপরের সমতল চিত্রকে আরও 3 ডি প্রভাব এবং আরও গভীরতা দিতে পারে। আমি এই প্রভাবটি এই মুহুর্তে বোতামগুলিতে ব্যবহৃত প্রভাবগুলি স্কেল করে, গ্রেডিয়েন্টগুলিকে 'টুইঙ্ক' করতে এবং জেড-ইনডেক্স দিয়ে এই পরীক্ষায় আছি experiment

Answer 7

ব্লক-স্তরের মাত্রাগুলি , স্বাভাবিক প্রবাহে অ-প্রতিস্থাপিত উপাদানগুলিকে সন্তুষ্ট করতে হবে

মার্জিন-বাম + সীমানা-বাম-প্রস্থ + প্যাডিং-বাম + প্রস্থ + প্যাডিং-রাইট + বর্ডার-ডান-প্রস্থ + মার্জিন-ডান = ব্লকযুক্ত প্রস্থ

অতিরিক্ত সীমাবদ্ধ হয়ে গেলে, ব্রাউজারগুলিকে অবশ্যই বাম বা ডান প্রান্তটি সামঞ্জস্য করতে হবে। আমার মনে হয় এর অর্থ মার্জিন বাক্সের প্রস্থ অবশ্যই ধারণকারী ব্লকের প্রস্থের (অর্থাৎ 100%) সমান হবে ।

আপনার ক্ষেত্রে, স্বচ্ছ সীমানা box-sizing: border-boxমার্জিনের মতো কাজ করতে পারে ।

Answer 8

সম্ভবত আরজিবিএ ব্যবহার করে সীমানাটি 0% অস্বচ্ছতাতে সেট করুন এবং সীমানাটি মার্জিন হিসাবে ব্যবহার করুন।

Comments

হ্যাকের মতো মনে হচ্ছে তবে কাজটি করবে।

— মরগান ফেনি

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

— সীমিতহীন

... যদি না আপনার আসলে সীমানার প্রয়োজন হয়

— ফ্রান্সেসকো

@ ফ্রেঞ্চসোএমএম - কিছুটা "গোলমাল" তবে আপনি "মার্জিন-প্রস্থ" স্বচ্ছ সীমানা (এবং অবশ্যই কোনও মার্জিন নেই) দিয়ে একটি বাক্স তৈরি করতে পারেন এবং সেই জায়গার ভিতরে আপনি যে প্রস্থটি প্রদর্শন করতে চান তার দৃশ্যমান সীমানা সহ একটি বাক্স তৈরি করতে পারেন (আবার কোনও নেই) মার্জিন)

— পাঁচ

আমি কেবল এই ধরণের চিন্তাভাবনা অনুসরণ করতে পারি না। আমি দুটি বাকী 1pxপৃথক পৃথক চাই প্রত্যেকটি 50%উপলব্ধ জায়গা গ্রহণ করা ছাড়াও কি প্রাকৃতিক কিছু আছে ? ঠিক সেটাই margin-boxকরত। অথবা মার্জিন বক্সটি ভুলে যান এবং উপলভ্য স্থান সম্পর্কে ভাবেন। প্যারেন্ট পাত্রে 50% নয়, যা বাকি আছে তার 50%। কোনও "ক্যালক" নেই, "5% মার্জিন" নেই, এমন কোনও জগাখিচুড়ি ...

— মাআর্টিনাস

Answer 9

দেহের সামগ্রীগুলির ভিতরে বক্স-আকার দেওয়ার সময় আকর্ষণীয় পরিস্থিতি রয়েছে

কোনও বিষয়বস্তু নেই কোনও সীমানা বাক্স এই দুটি বাক্সের পুনঃনিরত অ্যালগরিদমের বাম-ডান মার্জিন% রিক্যন্টের কোনও মান দেয় না

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

57 এর আগে ফায়ারফক্স সংস্করণগুলি বাক্স-আকার দেওয়ার জন্য প্যাডিং-বাক্স মানকে সমর্থন করেছিল, যদিও এই মানটি ব্রাউজারের নির্দিষ্টকরণ এবং পরবর্তী সংস্করণগুলি থেকে সরানো হয়েছিল।

মার্জিন বক্স এমনকি পরিকল্পনা না ...