This translation is incomplete. Please help translate this article from English.
Go to Previous Section:
Listsএটা হলো সিএসএস টিউটোরিয়াল এখানে সিএসএস শুরু করুন এর একাদশতম অনুচ্ছেদ; এখানে বর্ণনা করা হয়েছে যে একটা এলিমেন্ট যখন প্রদর্শন করা হয় তখন এটা ঠিক কতটুকু জায়গা(বা স্পেস) নেয় এবং আপনি সেটা কিভাবে নিয়ন্ত্রণ করতে পারবেন । আপনার স্যাম্পল বা নমুনা ডকুমেন্ট-এ আপনি ফাকা জায়গার পরিমান পরিবর্তন এবং সৌন্দর্যবৃদ্ধি সংক্রান্ত নিয়ম যোগ করতে পারবেন ।
তথ্য : বক্সসমূহ
যখন আপনার ব্রাউজার কোন এলিমেন্ট দেখায় তখন এলিমেন্টটি কিছু পরিমান জায়গা নেয় বা দখল করে । দখলকৃত এই জায়গার চারটি অংশ আছে ।
মাঝখানের জায়গাটুকু হলো ,একটা এলিমেন্ট এর বিষয়বস্তু দেখাতে যেই জায়গার প্রয়োজন হয় সেটা । এর চারপাশে ফাঁকা জায়গাটুকু হলো প্যাডিং । প্যাডিং এর চারপাশের ফাঁকা জায়গাটুকু হলো বর্ডার । এবং বর্ডারের চারপাশে রয়েছে মার্জিন যা একটি এলিমেন্ট হতে অন্য আরেকটি এলিমেন্টকে পৃথক করেছ ।
|
margin border padding element এই ফেকাশে ধুসর অংশগুলো বাক্স কাঠামোর বিভিন্ন অংশ নির্দেশ করছে । |
element আপনি ব্রাউজারে যা দেখেন । |
একটি এলিমেন্ট এর উপরে(top) ,ডানে(right) ,নিচে(bottom) এবং বামে(left) প্যাডিং ,বর্ডার ও মার্জিনের বিভিন্ন পরিমাণ দৈর্ঘ্য থাকতে পারে । এগুলোর যেকোন একটি বা সবগুলোর মান শূন্যও হতে পারে ।
রাঙানো
প্যাডিং এর রং ও ব্যাকগ্রাউন্ড এর রং সবসময় একই হয় । তাই যখন ব্যাকগ্রাউন্ড এর রং বসাবেন দেখবেন রঙটি ওই এলিমেন্ট এবং এর প্যাডিং এর জন্য প্রয়োগ হয়েছে । মার্জিন সবসময় স্বচ্ছ ।
|
margin border padding element এই এলিমেন্টটির পটভূমি সবুজ । |
element আপনি ব্রাউজারে যা দেখেন । |
Borders
You can use borders to decorate elements with lines or boxes.
To specify the same border all around an element, use the border property. Specify the width (usually in pixels for display on a screen), the style, and the color.
The styles are:
solid |
dotted |
dashed |
double |
inset |
outset |
ridge |
groove |
You can also set the style to none or hidden to explicitly remove the border, or set the color to transparent to make the border invisible without changing the layout.
To specify borders one side at a time, use the properties: border-top, border-right, border-bottom, border-left. You can use these to specify a border on only one side, or different borders on different sides.
This rule sets the background color and the top border of heading elements:
h3 {
border-top: 4px solid #7c7; /* mid green */
background-color: #efe; /* pale green */
color: #050; /* dark green */
}
The result looks like:
|
Stylish heading |
This rule makes images easier to see by giving them a mid-gray border all round:
img {border: 2px solid #ccc;}
The result looks like:
| Image: |  |
Margins and padding
Use margins and padding to adjust elements' positions and to create space around them.
Use the margin property or the padding property to set the margin or padding widths respectively.
If you specify one width, it applies all around the element (top, right, bottom and left).
If you specify two widths, the first applies to the top and bottom, the second to the right and left.
You can specify all four widths in the order: top, right, bottom, left.
This rule marks out paragraphs with the class remark by giving them a red border all round.
Padding all round separates the border from the text a little.
A left margin indents the paragraph relative to the rest of the text:
p.remark {
border: 2px solid red;
padding: 4px;
margin-left: 24px;
}
The result looks like:
|
Here is a normal paragraph. Here is a remark. |
When you use margins and padding to adjust the way elements are laid out, your style rules interact with the browser's defaults in ways that can be complex.
Different browsers lay elements out differently. The results might look similar until your stylesheet changes things. Sometimes this can make your stylesheet give surprising results.
To get the result you want, you might have to change your document's markup. The next page of this tutorial has more information on this.
For detailed information about padding, margins and borders, see the Box model reference page.
Action: Adding borders
Edit your CSS file, style2.css. Add this rule to draw a line across the page over each heading:
h3 {border-top: 1px solid gray;}
If you took the challenge on the last page, modify the rule you created, otherwise add this new rule to add space underneath each list item:
li {
list-style: lower-roman;
margin-bottom: 8px;
}
Refresh your browser to see the result:
|
(A) The oceans
(B) Numbered paragraphs 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
Add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea—something like this:
|
(A) The oceans
(B) Numbered paragraphs . . . |
(There is no need to match the width and color you see here exactly.)
See a solution to this challenge.
What next?
Go to Next Section:
LayoutBy specifying margins and padding, you modified the layout of your document. On the next page you change your document's layout in other ways.