как сдвинуть рамку блока

Question

Изменение границ блока не помогает. Нужно чтобы нижняя рамка левых блоков была на одной высоте с рамкой правых блоков.

.about-exemple-second:not(:last-of-type) {
    border-bottom: solid  3px;
}
.about-exemple:not(:last-of-type) {
    border-right: solid 3px;
    border-bottom: solid 3px;
}
.about-exemple {
    height: 100px;
    position: relative;
    overflow: hidden;
    display: block;
    width: 350px;
    text-align: center;
}
.about-exemple-second {
    position: relative;
    bottom: 303px;
    left: 353px;
    width: 300px;
    height: 100px;
    display: block;
    text-align: center;

}

<div class="about-exemple"><p>текст</p></div>
            <div class="about-exemple"><p>текст</p></div>
            <div class="about-exemple"><p>текст</p></div>
            <div class="about-exemple-second"><p>текст</p></div>
            <div class="about-exemple-second"><p>текст</p></div>
            <div class="about-exemple-second"><p>текст</p></div>

Answer 1

у блока <p> по умолчанию всегда есть внешние отступы margin, которые вам и портят всё позиционирование, вылезая за пределы родительских <div>. Исправляется просто: либо у всех <p> принудительно убираем margin, либо родительским <div> задаем хотя бы минимальный padding.

.about-exemple-second:not(:last-of-type) {
  border-bottom: solid 3px;
}

.about-exemple:not(:last-of-type) {
  border-right: solid 3px;
  border-bottom: solid 3px;
}

.about-exemple {
  padding: 1px;
  box-sizing: border-box;
  height: 100px;
  position: relative;
  overflow: hidden;
  display: block;
  width: 350px;
  text-align: center;
}

.about-exemple-second {
  padding: 1px;
  box-sizing: border-box;
  position: relative;
  bottom: 300px;
  left: 350px;
  width: 300px;
  height: 100px;
  display: block;
  text-align: center;
}


/*p {
  margin: 0;
}*/

<div class="about-exemple">
  <p>текст</p>
</div>
<div class="about-exemple">
  <p>текст</p>
</div>
<div class="about-exemple">
  <p>текст</p>
</div>
<div class="about-exemple-second">
  <p>текст</p>
</div>
<div class="about-exemple-second">
  <p>текст</p>
</div>
<div class="about-exemple-second">
  <p>текст</p>
</div>

БЛОГ НА HUSL

как сдвинуть рамку блока

Ответы (1 шт):