মার্জিনে অটো কী করে: 0 অটো?

Question

কী autoনা margin:0 auto;?

আমি বুঝতে পারি না কি autoকরে। আমি জানি এটি মাঝে মাঝে কেন্দ্রীভূত বস্তুর প্রভাব ফেলে। ধন্যবাদ।

Answer 1

আপনি widthযে বস্তুকে প্রয়োগ করেছেন তার উপরে যখন নির্দিষ্ট margin: 0 autoকরে থাকেন, তখন বস্তুটি মূল পাত্রে তার কেন্দ্রে বসে থাকবে।

autoদ্বিতীয় প্যারামিটার হিসাবে নির্দিষ্ট করা ব্রাউজারকে স্বয়ংক্রিয়ভাবে বাম এবং ডান মার্জিন নিজেই নির্ধারণ করতে বলে, যা এটি তাদেরকে সমানভাবে সেট করেই করে। এটি গ্যারান্টি দেয় যে বাম এবং ডান মার্জিন একই আকারে সেট করা হবে। প্রথম প্যারামিটার 0 ইঙ্গিত করে যে শীর্ষ এবং নীচের মার্জিন উভয়ই 0 তে সেট করা হবে।

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

অতএব, আপনাকে একটি উদাহরণ দেওয়ার জন্য , পিতা বা মাতা যদি 100px হয় এবং বাচ্চা 50px হয় তবে autoসম্পত্তিটি নির্ধারণ করবে যে এর মধ্যে ভাগ করার জন্য 50px মুক্ত স্থান আছে margin-leftএবং margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

যা দেবে:

margin-left:25;
margin-right:25;

এই jsFizz দেখুন । আপনাকে পিতা-মাতার প্রস্থটি নির্দিষ্ট করতে হবে না, কেবলমাত্র শিশু অবজেক্টের প্রস্থ।

Comments

কিন্তু আমরা কখনোই কোনো প্রস্থ নির্ধারণ bodyএবং আমরা সর্বদা দিতে widthএবং margin:0 autoকরতে#wrapper

— জিতেন্দ্র বিয়াস

ঠিক আছে তাহলে দেহ এবং বস্তুর মধ্যে মার্জিনটি স্বয়ংক্রিয়ভাবে ব্রাউজার দ্বারা গণনা করা হবে।

— জিতেন্দ্র ব্যাস

কোন অনুরূপ মান আছে %? মানে সিএসএসে অন্য কোনও সম্পত্তি আছে যা বাম এবং ডান মত একই ফল দিতে পারেauto

— জিতেন্দ্র ব্যাস

@ জেনেরিকটাইপ - এবং margin:auto 0শর্তে কী ঘটে ?

— জিতেন্দ্র ব্যাস

তবে, কেন আমি যখন মার্জিন ব্যবহার করি: 20 টি স্বয়ংক্রিয়র বাম-ডান অবস্থানকে প্রভাবিত করে? দেখে মনে হবে যে আমি যা করেছি তা হ'ল শীর্ষ / নীচের মার্জিন যুক্ত করা ...

— পিটোসালস

Answer 2

অটো: ব্রাউজারটি মার্জিন সেট করে। এর ফলাফলটি ব্রাউজারের উপর নির্ভরশীল

মার্জিন: 0 অটো নির্দিষ্ট করে

* top and bottom margins are 0
* right and left margins are auto

Answer 3

ব্লক-স্তরের জন্য প্রস্থ এবং মার্জিন গণনা সম্পর্কিত CSS স্পেসিফিকেশন থেকে , স্বাভাবিক প্রবাহে অ-প্রতিস্থাপিত উপাদান :

যদি 'মার্জিন-বাম' এবং 'মার্জিন-ডান' উভয়ই 'অটো' হয় তবে তাদের ব্যবহৃত মান সমান। এটি অন্তর্ভুক্ত ব্লকটির প্রান্তগুলিকে অনুভূমিকভাবে কেন্দ্র করে।

Comments

"তাদের ব্যবহৃত মান সমান" এর অর্থ কী?

— জিতেন্দ্র ব্যাস

@ ধাতু-গিয়ার-সলিড - যদি পিতামাতার প্রস্থ (ব্রাউজার দ্বারা বা নির্দিষ্ট প্রস্থের দ্বারা নির্ধারিত হয়) 100px হয় এবং আপনার সন্তানের ডিভের প্রস্থ 50px হয়। তারপরে মার্জিন: 0 অটো নির্ধারণ করবে যে উপলব্ধ স্থানের 50px আছে। এরপরে এটি 25 কে দিয়ে 2 কে বিভক্ত করবে The বাম এবং ডান প্রান্তটি উভয়ই 25 এ সেট হয়ে যায়, মানে মানগুলি সমানভাবে সেট করা হয়।

— djdd87

ব্যবহৃত মানগুলি এই সম্পত্তিটি ব্যবহার করে এমন উপাদানগুলির প্রকৃত ভিজ্যুয়াল বৈশিষ্ট্যের উপর নির্ভর করে প্রকৃত ব্যবহৃত মানগুলিকে বোঝায়। সংযুক্ত বিভাগে এমন একটি সূত্র রয়েছে যা কোনও উপাদান এবং এটিতে থাকা ব্লকের মধ্যে অনুভূমিক পার্থক্য গণনা করতে ব্যবহৃত হয়। তারপরে পার্থক্যটি সমানভাবে থুতু দেওয়া হয় এবং প্রকৃত অনুভূমিক মার্জিন মান হিসাবে ব্যবহৃত হয়।

— গম্বো

Answer 4

margin:0 auto;

0শীর্ষ-নীচে এবং autoবাম-ডানদিকে। এর অর্থ বাম এবং ডান মার্জিনটি উপাদানটির প্রস্থ এবং ধারকটির প্রস্থ অনুযায়ী অটো মার্জিন নেবে।

সাধারণত আপনি যদি কোনও উপাদানকে কেন্দ্রের অবস্থানে রাখতে চান তবে margin:autoনিখুঁতভাবে কাজ করে। তবে এটি কেবল ব্লক উপাদানগুলিতে কাজ করে।

Answer 5

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0 শীর্ষ-নীচে এবং বাম-ডানদিকে অটো জন্য। ব্রাউজারটি মার্জিন সেট করে।

Answer 6

দুটি মান কীভাবে কাজ করে তার কিছু ব্যাখ্যা দিয়ে এটি স্পষ্ট হয়ে যায়।

মার্জিন সম্পত্তি সংক্ষিপ্ত:

margin-top
margin-right
margin-bottom
margin-left

তাহলে কীভাবে কেবল দুটি মান আসবে?

ঠিক আছে, আপনি এর মতো চারটি মান সহ মার্জিন প্রকাশ করতে পারেন:

margin: 10px, 20px, 15px, 5px;

যার অর্থ 10px শীর্ষ, 20px ডান, 15px নীচে, 5px বাম হবে

তেমনি আপনি দুটি মান সহ এই মত প্রকাশ করতে পারেন:

margin: 20px 10px;

এটি আপনাকে উপরের এবং নীচের দিকে 20px এবং 10px বাম এবং ডানদিকে মার্জিন দেবে।

এবং যদি আপনি সেট করেন:

margin: 20px auto;

তারপরে এর অর্থ 20px এর শীর্ষ এবং নীচের মার্জিন এবং স্বয়ংক্রিয়র বাম এবং ডান মার্জিন। এবং অটো মানে বাম / ডান মার্জিনটি স্বয়ংক্রিয়ভাবে ধারকটির ভিত্তিতে সেট হয়ে গেছে। যদি আপনার উপাদানটি একটি ব্লক ধরণের উপাদান, যার অর্থ এটি একটি বাক্স এবং ভিউয়ের সম্পূর্ণ প্রস্থ গ্রহণ করে, তবে স্বয়ংক্রিয়ভাবে বাম এবং ডান প্রান্তটি একই সেট করে এবং তাই উপাদানটি কেন্দ্রিক।

Answer 7

"কেন্দ্র" ট্যাগটির প্রতিস্থাপন ব্যবহার করা এটি একটি ভাঙ্গা / খুব শক্ত। যখন আপনার ভাঙা টেবিলগুলি এবং ব্লক এবং পাঠ্যের জন্য অ-কার্যকরী কেন্দ্রিককরণ প্রয়োজন তখন এটি কার্যকর হয়।