Комбинация от 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;
}
:
Сега снимката се движи заедно с параграфите!
