|
সিএসএস প্যাডিং টিউটোরিয়াল (CSS
Padding)
|
|
লেখক
রাসেল
খান
|
সিএসএস প্যাডিং ব্যবহার করে আপনি এইচটিএমএল এলিমেন্ট (paragraphs,
tables ইত্যাদি ) এর default প্যাডিং পরিবর্তন করতে পারেন। আর প্যাডিং বলতে বোঝায় এলিমেন্ট এর border এবং তার content এর মধ্যের অংশকে।1.p {padding: 15px;
border: 1px solid black; }2.h5{padding: 0px;
border: 1px solid red;}
This is a paragraph
that has a padding of 15 pixels on every side: top, right, bottom, and left.
This header has no padding, which places the text right against the border!সিএসএস প্যাডিং: 1 Value1 Value বিশিষ্ট প্যাডিং সকল (top, right, bottom, left.) পাশে uniform padding তৈরী করে।1.p {padding: 2%;
border: 1px solid black; }2.h5{padding: 0px;
border: 1px solid red;}
This is a paragraph that
has a padding of 5 pixels on every side: left, top, right, and bottom.
This header has no প্যাডিং. It is only spaced away from the paragraph because the paragraph has a প্যাডিং of 5 pixels!সিএসএস প্যাডিং: padding-(direction):প্রত্যেক এইচটিএমএল এলিমেন্ট এর প্রকৃতপক্ষে চারটি ভিন্ন প্যাডিং থাকে যেমন top, right, bottom, এবং left । প্যাডিং direction attribute এর মাধ্যমে পৃথক পৃথক প্যাডিং নির্দেশ করা যায়। এক direction (যেমন -left) এ নির্দেশ করলে অন্যগুলো অপরিবর্তিত থাকে।p { padding-left: 5px; border: 1px solid black; }
h5{
padding-top: 0px; padding-right: 2px; padding-bottom: 13px; padding-left: 21px; border: 1px solid red; }প্রদর্শন:
This paragraph had one
padding specified(left), using directional declaration.
This header had each padding specified separately, using directional declaration.সিএসএস প্যাডিং: 2 & 4 Valuesযখন আমরা দুইটি প্যাডিং Value ব্যবহার করবো তখন প্রথম Value টি top এবং bottom প্যাডিং Value নির্দেশ করবে এবং দ্বিতীয় Value টি left and right প্যাডিং Value নির্দেশ করবে। মনে রাখতে হবে সাধারনত প্যাডিং Value টি top দিয়ে শুরু হয় এবং clockwise ভাবে এটি left এ শেষ হয়। প্যাডিং Value এর ধারাবাহিকতা হল top, right, bottom এবং left ।1.p {2.padding: 5px 15px;3.border: 1px solid black;4.}5.h5{6.padding: 0px 5px 10px 3px;7.border: 1px solid red;8.}প্রদর্শন:
This paragraph has a top
and bottom padding of 5 pixels and a right and left padding of 15 pixels.
This header has a top padding of 0 pixels, a right padding of 5 pixels, a bottom padding of 10 pixels, and a left padding of 3 pixels.সিএসএস Margin:সিএসএস Margins প্রায় সিএসএস প্যাডিং attribute এর মত। শুধু একটা গুরুত্বপূর্ন পাথর্ক্য হচ্ছে:Margin বলতে এইচটিএমএল এলিমেন্ট এর border এর চারপাশের অংশকে বোঝায় আর প্যাডিং বলতে border এর ভিতরের অংশকে বোঝায়। প্যাডিং এর মত Margin এর Value সেট করা যায়।1.p {margin: 5px;
border: 1px solid black; }2.h5{margin: 0px;
border: 1px solid red;}প্রদর্শন:
This is a paragraph that
has a margin of 2% on every side: top, right, bottom, and left.
This header has a margin of 5 pixels.সিএসএস Margin: 1 Valueএটা সিএসএস প্যাডিং: 1 Value এর মত1.<b> </b>2.p {margin: 2%;
border: 1px solid black; }3.h5{margin: 0px;
border: 1px solid red;}
This is a paragraph that
has a margin of 2% on every side: top, right, bottom, and left.
This header has a margin of 5 pixels.সিএসএস Margin: margin-(direction):এটা সিএসএস প্যাডিং: padding-(direction) এর মত ।1.p { margin-left:
5px; border: 1px solid black; }2.h5{ margin-top:
0px;3.margin-right: 2px;4.margin-bottom:
13px;5.margin-left: 21px;6.border: 1px solid red; }
This paragraph had one
margin specified (left), using directional declaration. Note that there is
still a margin below and above this paragraph. This is because our CSS only
replaced one of the four margins, which didn't effect the top and
bottom margins.
This header had each margin specified separately, using directional declaration.সিএসএস Margin: 4 Valuesএটা সিএসএস প্যাডিং: 2 & 4 Values এর মত ।1.p {margin: 5px 15px;2.border: 1px solid black; }3.h5{margin: 0px 5px 10px 3px;4.border: 1px solid red;}
This paragraph has a top
and bottom margin of 5 pixels and a right and left margin of 15 pixels.
This header has a top margin of 0 pixels, a right margin of 5 pixels, a bottom margin of 10 pixels, and a left margin of 3 pixels. |
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন