Комбинација на float и margin во CSS
Сега нашиот текст е притиснат кон сликата од левата
страна. Ајде да се обидеме малку да го оддалечиме
овој текст. За да го направиме ова, ќе им доделиме на нашите параграфи
лев margin од 30px, а на родителот div
- црвена граница.
Неочекувано, само текстот што е во допир со родителот div ќе се повлече надесно, додека текстот што е во допир со сликата - нема да се помести:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
}
img {
float: left;
}
:
За да разбереме зошто е вака, ајде да им додадеме на параграфите зелена граница:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
}
:
Како што можеме да видиме, всушност параграфите се оддалечуваат
од левиот раб, но не од сликата, туку од родителот div.
За да го разгледаме подетално, ајде да додадеме
и полупроѕирност на сликата преку својството
opacity:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Сега точно се гледа дека има реакција на margin-left,
само што параграфите всушност се поставени
под сликата. Ајде да го отстраниме маргината, оставајќи ја
полупроѕирноста на сликата:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Вака всушност изгледаат нашите параграфи - нивниот текст е поместен од сликата, но физички параграфите лежат под сликата, ова се гледа по границата, која започнува од левиот раб на родителот div.
Ајде да го вратиме margin и да ја ставиме сликата
во првиот параграф:
<div>
<p>
<img src="img.png" alt="">
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Сега сликата се движи заедно со параграфите!
