@sergei026
Стремлюсь стать верстальщиком

Как сделать рамку со всех сторон?

Как сделать рамку со всех сторон? После многих экспериментов так и не получается.
код html
<div class="portfolio__blocks">
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img smile"></div>
			<div class="portfolio__blocks--text">Проектов</div>
			<div class="portfolio__blocks--numbers">1000+</div>
		</div>
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img diacussion"></div>
			<div class="portfolio__blocks--text">Клиентов</div>
			<div class="portfolio__blocks--numbers">350</div>
		</div>
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img ok"></div>
			<div class="portfolio__blocks--text">Работаю с</div>
			<div class="portfolio__blocks--numbers">2015</div>
		</div>
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img smile"></div>
			<div class="portfolio__blocks--text">Проектов</div>
			<div class="portfolio__blocks--numbers">1000+</div>
		</div>
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img diacussion"></div>
			<div class="portfolio__blocks--text">Клиентов</div>
			<div class="portfolio__blocks--numbers">350</div>
		</div>
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img ok"></div>
			<div class="portfolio__blocks--text">Работаю с</div>
			<div class="portfolio__blocks--numbers">2015</div>
		</div>
	</div>


код css
//Блок с портфолио
.portfolio{
	background: #f0f0f0;

//Блоки с предварительной инфой
	&__blocks{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

//Сами блоки 
		&-item{
			flex-direction: column;
			border: 1px solid gray;
			border-top: none;
			padding: 10px;

//Предварительные блоки обо мне
			&:nth-child(1n+1){
				border-right: none;
			}
			&:last-child{
				border-right: 1px solid gray;
			}
		}
		&--img{
			background: url(../img/spl-sprit.png) no-repeat;
			width: 72px;
			height: 64px;	
			margin: 40px 80px;			
		}
		&--text{
			text-align: center;
			color: #999999;
			font-size: 20px;
		}
		&--numbers{
			text-align: center;
			color: #00ccff;
			font-size: 40px;
			padding: 10px;
		}
	}
}


Ссылка на copden
https://codepen.io/sergej-korolew/pen/yweEqW
  • Вопрос задан
  • 166 просмотров
Решения вопроса 2
warsand
@warsand
Экспериментатор
Убрать лишние чилдры, а вот здесь вставить маржу:
&-item {
		flex-direction: column;
		border: 1px solid gray;
		box-sizing: border-box;
		padding: 10px;
    margin: -.5px; /* каждый margin будет съедать по пол-пикселя у соседнего блока */
   }
Результат:
Если же толщину border-а придётся менять чаще, то значение толщины вывести в переменную,
как подсказал Андрей Федоров и маржу высчитывать через calc() автоматически.
В моём случае маржа всего одна и равна она половине бордера...
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы