Подскажите почему у блока triangle
не работает margin-bottom
? который 1
#pictures {
text-align: center;
width: 1366px;
height: 385px;
display: block;
border: 1px solid red;
box-sizing: border-box;
}
#tv {
float: left;
display: block;
width: 300px;
max-height: 300px;
margin-top: 50px;
margin-left: 193px;
}
.pictureone {
display: block;
vertical-align: top;
}
.picturetwo {
display: none;
vertical-align: top;
}
#containerfortv {
margin-left: 70px;
width: 111px;
height: 112px;
display: block;
}
#containerfortv:hover>.pictureone {
display: none;
}
#containerfortv:hover>.picturetwo {
display: block;
}
#pencil {
float: left;
display: block;
width: 305px;
max-height: 300px;
margin: 77px auto 0;
}
#containerforpencil {
margin: 0 auto 0;
width: 115px;
height: 118px;
display: block;
}
#containerforpencil:hover>.pictureone {
display: none;
}
#containerforpencil:hover>.picturetwo {
display: inline-block;
}
#mountains {
float: left;
display: block;
width: 305px;
max-height: 300px;
margin-left: 46px;
margin-top: 50px;
}
#containerformountains {
margin: 0 auto 0;
width: 128px;
height: 112px;
display: block;
}
#containerformountains:hover>.pictureone {
display: none;
}
#containerformountains:hover>.picturetwo {
display: inline-block;
}
#clearfix {
clear: both;
}
#triangleup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid green;
}
#triangle {
display: block;
border: 1px solid red;
height: 50px;
margin-bottom: 0px;
}
<section id="pictures">
<div id="tv">
<div id="containerfortv">
<img class="pictureone" src="https://b.radikal.ru/b39/1801/6a/339592a851eb.png">
<img class="picturetwo" src="https://b.radikal.ru/b39/1801/6a/339592a851eb.png">
</div>
<div class="blocktext">
<p class="textpicturesheader">Lorem Ipsum is simply</p>
<p class="textpictures">Lorem Ipsum is simply dummy text of the printing</p>
</div>
</div>
<div id="pencil">
<div id="containerforpencil">
<img class="pictureone" src="https://b.radikal.ru/b39/1801/6a/339592a851eb.png">
<img class="picturetwo" src="https://b.radikal.ru/b39/1801/6a/339592a851eb.png">
</div>
<div id="blocktext">
<p class="textpicturesheader">Lorem Ipsum is simply</p>
<p class="textpictures">Lorem Ipsum is simply dummy text of the printing</p>
</div>
</div>
<div id="mountains">
<div id="containerformountains">
<img class="pictureone" src="https://b.radikal.ru/b39/1801/6a/339592a851eb.png">
<img class="picturetwo" src="https://b.radikal.ru/b39/1801/6a/339592a851eb.png">
</div>
<div id="blocktext">
<p class="textpicturesheader">Lorem Ipsum is simply</p>
<p class="textpictures">Lorem Ipsum is simply dummy text of the printing</p>
</div>
</div>
<div id="clearfix"></div>
<div id="triangle">1</div>
</section>
0px
, чему там работать-то, написано ноль — маргина и нет – andreymal 10 янв '18 в 16:26