css الدرس السابع فى

Margin and Padding

– وفى هذ الجزء سنشرح موضوع التباعد الخارجى (margin)والداخلى (padding) والمقصود بالتباعد الخارجى هو التحكم فى المسافات بين التاجات وبعضها من اعلى او اسفل او من اليسار او اليمين فمثلا اذا قمنا بادراج صورة وجدول داخل الموقع فعن طريق هذة الخاصية تستطيع ضبط المسافة بين الصورة والجدول بالدرجة التى تريدها انت اما التباعد الداخلى فيتحكم فى ضبط المسافات ولكن داخل التاج والخصائص المستخدمة فى عمل (margin,padding)هى كالتالى:

الشرح

Properties

تستخدم فى عمل مسافة خارجية من الاسفل

margin-bottom

تستخدم فى عمل مسافة خارجية من اليسار

margin-left

تستخدم فى عمل مسافة خارجية من اليمين

margin-right

تستخدم فى عمل مسافة خارجية من الاعلى

margin-top

يمكن ان تدمج الخصائص السابقة فى هذة الخاصية

margin

تستخدم فى عمل مسافة داخلية من الاسفل

padding-bottom

تستخدم فى عمل مسافة داخلية من اليسار

padding-left

تستخدم فى عمل مسافة داخلية من اليمين

padding-right

تستخدم فى عمل مسافة داخلية من الاعلى

padding-top

يمكن ان تدمج الخصائص السابقة فى هذة الخاصية

padding

:(margin) اولا مثال على التباعد الخارجى-

<!DOCTYPE html><html><head><style>p.normal

{

background-color:yellow;

}

p.margin

{

margin-top:100px;

margin-bottom:50px;

margin-right:100px;

margin-left:50px;

}

</style>

</head>

<body>

<p class=”normal”>This is a paragraph with no specified margins.</p>

<p class=”margin”>This is a paragraph with specified margins.</p>

</body>

</html>

ويمكن اسخدام خاصية(margin)لتجميع المسافات كلها فى سطر واحد كالتالى:

<!DOCTYPE html>

<html>

<head>

<style>

p.normal

{

background-color:yellow;

}

p.margin

{

margin:100px 100px 50px 50px;

}

</style>

</head>

<body>

<p>This is a paragraph with no specified margins.</p>

<p>This is a paragraph with specified margins.</p>

</body>

</html>

: كالتالى (margin)ويكون الترتيب داخل خاصية-

Margin:top right bottom left;

– اى المثال السابق كالتالى :

margin:100px 100px 50px 50px;

  • top margin is 100px
  • right margin is 100px
  • bottom margin is 50px
  • left margin is 50px

– ثانيا مثال على التباعد الداخلى (padding):

<!DOCTYPE html>

<html>

<head>

<style>

p.normal

{

background-color:yellow;

}

p.padding

{

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

}

</style>

</head>

<body>

<p calss=”normal”>This is a paragraph with no specified padding.</p>

<p>This is a paragraph with specified paddings.</p>

</body>

</html>

وبالمثل كما يمكن تجميع المسافات فى سطر واحد عن طريق خاصية (padding) كالتالى:

<!DOCTYPE html>

<html>

<head>

<style>

p.normal

{

background-color:yellow;

}

p.padding

{

padding:25px 50px 25px 50px;

}

</style>

</head>

<body>

<p>This is a paragraph with no specified padding.</p>

<p>This is a paragraph with specified paddings.</p>

</body>

</html>

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: