সিএসএস: শীর্ষ বনাম মার্জিন-শীর্ষ

Question

আমি নিশ্চিত না যে আমি এই দুটিয়ের মধ্যে পার্থক্যটি পুরোপুরি বুঝতে পারি কিনা।

কেউ ব্যাখ্যা করতে পারে যে আমি কেন একজনের উপরে ব্যবহার করব এবং কীভাবে তারা পার্থক্য করবে?

Answer 1

toppositionসম্পত্তি ব্যবহারের সাথে একটি উপাদানটিকে ঝাপটানোর জন্য ।
margin-topপূর্বেরটির সাথে সম্পর্কিত উপাদানটির বাহ্যিক দূরত্ব পরিমাপ করার জন্য।

এছাড়াও, topঅবস্থানের ধরণের উপর নির্ভর করে আচরণের ক্ষেত্রে ভিন্নতা থাকতে পারে absolute, relativeবা fixed।

Answer 2

আপনি যদি মার্জিন ব্যবহার করেন, আপনি যদি নথির প্রবাহের অন্যান্য উপাদানগুলি থেকে কোনও (ব্লক) উপাদান সরিয়ে নিতে চান। তার মানে এটি নীচের উপাদানগুলিকে দূরে / আরও নীচে ঠেলে দেবে। সাবধান থাকুন যে সংলগ্ন ব্লক উপাদানের উল্লম্ব মার্জিন ধসে পড়ে।

আপনি পার্শ্ববর্তী উপাদানে কোনো প্রভাব আছে উপাদান চান, তাহলে আপনি পজিশনিং (ABS।, রিল।) এবং ব্যবহার করতে চাই top, bottom, leftএবং rightসেটিংস।

সঙ্গে relativeপজিশনিং, উপাদান এখনও স্ট্যাটিক্যালি স্থান হিসাবে তার মূল স্থান দখল করবে। কেন কিছুই ঘটে অর্থাৎ যদি আপনি শুধু থেকে সুইচ staticকরার relativeঅবস্থান। সেখান থেকে, আপনি এটি পার্শ্ববর্তী উপাদানগুলি জুড়ে নিক্ষেপ করতে পারেন।

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

Answer 3

মার্জিন উপাদানটির স্বাভাবিক সীমানা প্রযোজ্য এবং প্রসারিত / চুক্তি করে তবে আপনি শীর্ষকে কল করার সময় আপনি উপাদানটির নিয়মিত অবস্থান উপেক্ষা করে নির্দিষ্ট স্থানে ভাসাচ্ছেন।

উদাহরণ:

এইচটিএমএল:

<div id="some_element">content</div>

সিএসএস:

#some_element {margin-top: 50%}

এর অর্থ উপাদানটি তার ধারকটির 50% উচ্চতায় এইচটিএমএল প্রদর্শিত শুরু করবে (অর্থাত্ "কন্টেন্ট" শব্দটি প্রদর্শনকারী ডিভটি কিছু # এলিমেন্টের আগে এটির ডিভ বা এইচটিএমএল নোডের 50% উচ্চতায় প্রদর্শিত হবে) তবে আপনি যদি খোলেন ব্রাউজারের পরিদর্শক (উইন্ডোজ এফ 12 বা ম্যাকের উপর সিএমডি + ইল্ট + আই) এবং উপাদানটির উপর মাউস আপনি দেখতে পাবেন যে এটির সীমানা হাইলাইট করা হয়েছে এবং লক্ষ্য করুন যে উপাদানটি পুনরায় অবস্থানের পরিবর্তে চাপ দেওয়া হয়েছে।

অন্যদিকে শীর্ষ:

#some_element {top: 50%}

আসলে এটি উপাদানটি প্রতিস্থাপন করবে যার অর্থ এটি এখনও তার ধারকটির 50% এ প্রদর্শিত হবে তবে এটি উপাদানটি পুনঃস্থাপন করবে যাতে এর প্রান্তটি এর সমন্বিত উপাদানটির 50% থেকে শুরু হয়। অন্য কথায়, উপাদানটির ধার এবং এর ধারকগুলির মধ্যে একটি ফাঁক থাকবে।

চিয়ার্স!

Answer 4

topসম্পত্তি একটি অবস্থান সম্পত্তি। এটি positionসম্পত্তি হিসাবে যেমন ব্যবহার করা হয় absoluteবা হিসাবে ব্যবহৃত হয় relative। margin-topএকটি উপাদান নিজস্ব সম্পত্তি।

Answer 5

বাইট থেকে:

"মার্জিনটি হ'ল কোনও উপাদানটির বাক্সের প্রান্ত এবং সম্পূর্ণ বাক্সের প্রান্তের মধ্যে যেমন একটি বর্ণের প্রান্তিকের মতো স্থান '' শীর্ষস্থানীয় blocks উপাদানটিকে ব্লক বাক্স থেকে উপাদানটির মার্জিন প্রান্তকে স্থানান্তর করে, যেমন কাগজের টুকরোটির মতো inside একটি কার্ডবোর্ড বাক্স, তবে এটি ধারকটির প্রান্তের বিপরীতে নয় "

আমার বোধগম্যতা হল যে মার্জিন-শীর্ষ উপাদানটির উপর একটি মার্জিন তৈরি করে এবং শীর্ষটি অফসেটে থাকা উপাদানটির শীর্ষ প্রান্তের নীচের অংশের শীর্ষ প্রান্তটি সেট করে।

আপনি এটি এখানে চেষ্টা করতে পারেন:

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

পার্থক্যটি দেখতে কেবল মার্জিন-শীর্ষের সাথে শীর্ষ প্রতিস্থাপন করুন।