CSS ﻪﯿﺷﺎﺣ

فهرست مطالب

    نمایش فهرست مطالب

.ﺪﻧﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻩﺪﺷ ﻒﯾﺮﻌﺗ ﯼﺎﻫﺯﺮﻣ ﺯﺍ ﺝﺭﺎﺧ ،ﺮﺻﺎﻨﻋ ﻑﺍﺮﻃﺍ ﺭﺩ ﯽﯾﺎﻀﻓ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﺎﻫ

This element has a margin of 70px.

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Margins</h2>

<div>This element has a margin of 70px.</div>

</body>
</html>

CSS ﯼﺎﻫ ﻪﯿﺷﺎﺣ

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﺻﺎﻨﻋ ﻑﺍﺮﻃﺍ ﯼﺎﻀﻓ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ mar

ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﺹﺍﻮﺧ .ﺪﯾﺭﺍﺩ ﺎﻫ ﻪﯿﺷﺎﺣ ﺮﺑ ﯽﻠﻣﺎﮐ ﻝﺮﺘﻨﮐ ،CSS ﺎﺑ

ﯼﺩﺍﺮﻔﻧﺍ ﻦﯿﻓﺮﻃ - ﻪﯿﺷﺎﺣ

CSS ﺖﺳﺍ ﻡﺍﺪﮐ ﺮﻫ ﯼﺍﺮﺑ ﻪﯿﺷﺎﺣ ﻦﯿﯿﻌﺗ ﯼﺍﺮﺑ ﯽﯾﺎﻫ ﯽﮔﮋﯾﻭ ﯼﺍﺭﺍﺩ

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

:ﺪﻨﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺍﺭ ﺮﯾﺯ ﺮﯾﺩﺎﻘﻣ ﺪﻨﻧﺍﻮﺗ ﯽﻣ ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ

  • ﺪﻨﮐ ﯽﻣ ﻪﺒﺳﺎﺤﻣ ﺍﺭ ﻪﯿﺷﺎﺣ ﺮﮔﺭﻭﺮﻣ - ﺭﺎﮐﺩﻮﺧ

  • ﻝﻮﻃ - ﺭﺩ ﺍﺭ ﻪﯿﺷﺎﺣ ﮏﯾ px، pt، cm ﯽﻣ ﺺﺨﺸﻣ ﻩﺮﯿﻏ ﻭﺪﻨﮐ.

  • % - ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﯼﻭﺎﺣ ﺮﺼﻨﻋ ﺽﺮﻋ ﺯﺍ ﺪﺻﺭﺩ ﺐﺴﺣ ﺮﺑ ﻪﯿﺷﺎﺣ ﮏﯾ

  • inherit - ﺩﻮﺷ ﻩﺩﺮﺑ ﺙﺭﺍ ﻪﺑ ﺪﻟﺍﻭ ﺮﺼﻨﻋ ﺯﺍ ﺪﯾﺎﺑ ﻪﯿﺷﺎﺣ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

ﻪﺘﮑﻧ: ﺪﻨﺘﺴﻫ ﺯﺎﺠﻣ ﯽﻔﻨﻣ ﺮﯾﺩﺎﻘﻣ.

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ <p> ﺮﺼﻨﻋ ﻑﺮﻃ ﺭﺎﻬﭼ ﺮﻫ ﯼﺍﺮﺑ ﺍﺭ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﻪﯿﺷﺎﺣ

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>

ﺮﺼﺘﺨﻣ ﻝﺎﻣ - ﻪﯿﺷﺎﺣ

ﺩﺮﮐ ﺺﺨﺸﻣ ﻥﺁ ﺭﺩ ﺍﺭ ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﻥﺍﻮﺗ ﯽﻣ ،ﺪﮐ ﻥﺩﺮﮐ ﻩﺎﺗﻮﮐ ﯼﺍﺮﺑ

:ﺖﺳﺍ ﺮﯾﺯ ﯼﺩﺮﻓ ﻪﯿﺷﺎﺣ ﺕﺎﯿﺻﻮﺼﺧ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ marg

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

:ﺪﻨﮐ ﯽﻣ ﺭﺎﮐ ﻪﻧﻮﮕﭼ ﺎﺠﻨﯾﺍ ﺭﺩ ،ﻦﯾﺍﺮﺑﺎﻨﺑ

:ﺪﺷﺎﺑ ﺭﺍﺪﻘﻣ ﺭﺎﻬﭼ ﯼﺍﺭﺍﺩ margin ﯽﮔﮋﯾﻭ ﺮﮔﺍ

margin: 25px 50px 75px 100px;

  • ﺖﺳﺍ ﻞﺴﮑﯿﭘ 25 ﻻﺎﺑ ﻪﯿﺷﺎﺣ

  • ﺖﺳﺍ ﻞﺴﮑﯿﭘ 50 ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ

  • ﺖﺳﺍ ﻞﺴﮑﯿﭘ 75 ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ

  • ﺖﺳﺍ ﻞﺴﮑﯿﭘ 100 ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺭﺍﺪﻘﻣ ﺭﺎﻬﭼ ﺎﺑ margin ﯽﺴﯾﻮﻧﻩﺎﺗﻮﮐ ﯽﮔﮋﯾﻭ ﺯﺍ

p {
  margin: 25px 50px 75px 100px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 4 values</h2>

<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>

<hr>

</body>
</html>

:ﺪﺷﺎﺑ ﺭﺍﺪﻘﻣ ﻪﺳ ﯼﺍﺭﺍﺩ margin ﯽﮔﮋﯾﻭ ﺮﮔﺍ

margin: 25px 50px 75px;

  • ﺖﺳﺍ ﻞﺴﮑﯿﭘ 25 ﻻﺎﺑ ﻪﯿﺷﺎﺣ

  • ﺖﺳﺍ ﻞﺴﮑﯿﭘ 50 ﭗﭼ ﻭ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ

  • ﺖﺳﺍ ﻞﺴﮑﯿﭘ 75 ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺭﺍﺪﻘﻣ ﻪﺳ ﺎﺑ ﻪﯿﺷﺎﺣ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﺯﺍ

p {	margin: 25px 50px 75px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 3 values</h2>

<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>

<hr>

</body>
</html>

:ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺭﺍﺪﻘﻣ ﻭﺩ margin ﯽﮔﮋﯾﻭ ﺮﮔﺍ

margin: 25px 50px;

  • ﺪﻨﺘﺴﻫ ﻞﺴﮑﯿﭘ 25 ﻦﯿﯾﺎﭘ ﻭ ﻻﺎﺑ ﯼﺎﻫ ﻪﯿﺷﺎﺣ

  • ﺖﺳﺍ ﻞﺴﮑﯿﭘ 50 ﭗﭼ ﻭ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺭﺍﺪﻘﻣ ﻭﺩ ﺎﺑ margin ﯽﺴﯾﻮﻧﻩﺎﺗﻮﮐ ﯽﮔﮋﯾﻭ ﺯﺍ

p {	margin: 25px 50px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 2 values</h2>

<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>

<hr>

</body>
</html>

:ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺭﺍﺪﻘﻣ ﮏﯾ margin ﯽﮔﮋﯾﻭ ﺮﮔﺍ

margin: 25px;

  • ﺪﻨﺘﺴﻫ ﻞﺴﮑﯿﭘ 25 ﻪﯿﺷﺎﺣ ﺭﺎﻬﭼ ﺮﻫ

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺭﺍﺪﻘﻣ ﮏﯾ ﺎﺑ ﻪﯿﺷﺎﺣ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﺯﺍ

p {
  margin: 25px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right margin of 25px.</div>

<hr>

</body>
</html>

ﺭﺎﮐﺩﻮﺧ ﺵﺯﺭﺍ

.ﺪﻫﺩ ﺭﺍﺮﻗ ﺵﺍﻪﻈﻔﺤﻣ ﺭﺩ ﯽﻘﻓﺍ ﺕﺭﻮﺻ ﻪﺑ ﺍﺭ ﺮﺼﻨﻋ ﺎﺗ ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ

ﻝﺎﺜﻣ

:ﺭﺎﮐﺩﻮﺧ :ﻪﯿﺷﺎﺣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

div {
  width: 300px;
  margin: 
auto;
  border: 1px solid red;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>

ﯽﺛﺭﺍ ﺵﺯﺭﺍ

.ﺩﻮﺷ ﻩﺩﺮﺑ ﺙﺭﺍ ﻪﺑ ﺪﻟﺍﻭ ﺮﺼﻨﻋ ﺯﺍ <"p class="ex1> ﺮﺼﻨﻋ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟ

ﻝﺎﺜﻣ

:ﯽﺛﺭﺍ ﺵﺯﺭﺍ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
    margin-left: 
inherit;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

</body>
</html>

CSS ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ

margin

ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

margin-bottom

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ

margin-left

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ

margin-right

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ

margin-top

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﯽﯾﻻﺎﺑ ﻪﯿﺷﺎﺣ

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024