Пробел между границами сверху и снизу
Я возился с внутренними границами в CSS. Я пытаюсь скопировать этот макет для сетки изображений на своем веб-сайте:
Я не могу воссоздать способ, которым горизонтальные и вертикальные границы не соприкасаются друг с другом, как здесь выделено красным:
Это самое близкое, что я получаю:
(Копирование кода NY Times здесь бесполезно, так как у них другая настройка. Верхняя граница — это нижняя граница другого div. Нижняя граница — это верхняя граница другого div.)
Я понимаю, что границы соприкасаются с одной стороны, потому что я использую отступы вместо полей. Но какие у меня есть другие варианты?
Мой вопрос: Как сделать так, чтобы границы не касались горизонтальной линии?
Выдержка из одной карты
/* @media (min-width: 765px) { */
.cards {
display: flex;
flex-wrap: wrap;
margin-top: 1.1rem;
}
.cards article {
border-right: 1px solid #e2e2e2;
box-sizing: content-box;
flex-grow: 1;
width: 28%;
border-top: 1px solid #e2e2e2;
padding: 1.1rem;
padding-bottom: 0;
margin-top: 1.2rem;
}
.cards article:nth-child(1),
.cards article:nth-child(2),
.cards article:nth-child(3) {
border-top: none;
padding-top: 0;
}
.cards article:nth-child(3n) {
border-right: none;
padding-right: 0;
}
/* TODO formulate expression */
.cards article:nth-child(1),
.cards article:nth-child(4),
.cards article:nth-child(7),
.cards article:nth-child(10),
.cards article:nth-child(13),
.cards article:nth-child(16),
.cards article:nth-child(19) {
padding-left: 0;
}
.cards-wrapper .page-title {
margin-top: 3.2rem;
margin-bottom: 0;
font-size: 220%;
}
/* } */<article>
<a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">
<figure>
</figure>
</a>
<p class = "date"><time datetime = "2022-03-18">18. mars 2022</time></p>
<h2 itemprop = "headline"><a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">Ullandhaug, tirsdag ettermiddag</a></h2>
<p class = "description">@ Acros</p>
</article>Я отключил медиа-запрос, чтобы карты отображались в небольшой демонстрации. Пожалуйста, измените, чтобы оно выглядело ближе к вашему изображению.
—
22.03.2022 15:45
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
62
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
С вашей текущей структурой HTML я бы использовал псевдоэлемент ::after для достижения этой цели.
.cards {
display: flex;
flex-wrap: wrap;
margin-top: 1.1rem;
}
.cards article {
position: relative;
border-right: 1px solid #e2e2e2;
box-sizing: content-box;
flex-grow: 1;
width: 28%;
padding: 1.1rem;
margin: 1.1rem 0;
}
.cards article::after {
content: '';
position: absolute;
bottom: -1.1rem;
left: 0;
display: block;
width: 101%;
height: 1px;
background: #e2e2e2;
}
.cards article:nth-child(1),
.cards article:nth-child(2),
.cards article:nth-child(3) {
border-top: none;
padding-top: 0;
}
.cards article:nth-child(3n) {
border-right: none;
padding-right: 0;
}
/* TODO formulate expression */
.cards article:nth-child(1),
.cards article:nth-child(4),
.cards article:nth-child(7),
.cards article:nth-child(10),
.cards article:nth-child(13),
.cards article:nth-child(16),
.cards article:nth-child(19) {
padding-left: 0;
}
.cards-wrapper .page-title {
margin-top: 3.2rem;
margin-bottom: 0;
font-size: 220%;
}<div class = "cards">
<article>
<a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">
<figure>
</figure>
</a>
<p class = "date"><time datetime = "2022-03-18">18. mars 2022</time></p>
<h2 itemprop = "headline"><a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">Ullandhaug, tirsdag ettermiddag</a></h2>
<p class = "description">@ Acros</p>
</article>
<article>
<a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">
<figure>
</figure>
</a>
<p class = "date"><time datetime = "2022-03-18">18. mars 2022</time></p>
<h2 itemprop = "headline"><a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">Ullandhaug, tirsdag ettermiddag</a></h2>
<p class = "description">@ Acros</p>
</article>
<article>
<a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">
<figure>
</figure>
</a>
<p class = "date"><time datetime = "2022-03-18">18. mars 2022</time></p>
<h2 itemprop = "headline"><a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">Ullandhaug, tirsdag ettermiddag</a></h2>
<p class = "description">@ Acros</p>
</article>
<article>
<a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">
<figure>
</figure>
</a>
<p class = "date"><time datetime = "2022-03-18">18. mars 2022</time></p>
<h2 itemprop = "headline"><a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">Ullandhaug, tirsdag ettermiddag</a></h2>
<p class = "description">@ Acros</p>
</article>
<article>
<a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">
<figure>
</figure>
</a>
<p class = "date"><time datetime = "2022-03-18">18. mars 2022</time></p>
<h2 itemprop = "headline"><a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">Ullandhaug, tirsdag ettermiddag</a></h2>
<p class = "description">@ Acros</p>
</article>
<article>
<a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">
<figure>
</figure>
</a>
<p class = "date"><time datetime = "2022-03-18">18. mars 2022</time></p>
<h2 itemprop = "headline"><a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">Ullandhaug, tirsdag ettermiddag</a></h2>
<p class = "description">@ Acros</p>
</article>
<article>
<a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">
<figure>
</figure>
</a>
<p class = "date"><time datetime = "2022-03-18">18. mars 2022</time></p>
<h2 itemprop = "headline"><a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">Ullandhaug, tirsdag ettermiddag</a></h2>
<p class = "description">@ Acros</p>
</article>
<article>
<a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">
<figure>
</figure>
</a>
<p class = "date"><time datetime = "2022-03-18">18. mars 2022</time></p>
<h2 itemprop = "headline"><a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">Ullandhaug, tirsdag ettermiddag</a></h2>
<p class = "description">@ Acros</p>
</article>
<article>
<a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">
<figure>
</figure>
</a>
<p class = "date"><time datetime = "2022-03-18">18. mars 2022</time></p>
<h2 itemprop = "headline"><a itemprop = "url" href = "/foto/ullandhaug-tirsdag-ettermiddag/">Ullandhaug, tirsdag ettermiddag</a></h2>
<p class = "description">@ Acros</p>
</article>
</div>Ваше здоровье. Я заметил, что мы должны установить width: 101%, чтобы предотвратить крошечное пространство между границами. Почему?
—
23.03.2022 09:25
Из-за свойства border-right ширина элемента article увеличивается, а псевдоэлемент не учитывает это, поэтому мы соответствующим образом корректируем. Использование width: calc(100% + 1px) — идеальный способ сделать это с 1px размером вашего border-right.
—
23.03.2022 10:36
Другие вопросы по теме
Добавляйте пробелы между каждой буквой слова HTML и CSS
Пользовательский CSS для выбора диапазона дат AntD
CSS: селектор первого типа применяется ко всем (с использованием тега html, а не класса)
Переключатель кнопки SVG
Режим наложения отдельных букв в слове в CSS
Анимация затухания для диалогов в Vaadin 14+
Изменить цвет кнопки, если я нахожусь на определенном URL-адресе
Как выровнять компоненты div в одну строку?
В масштабе нижний размытый элемент перекрывает масштабированный элемент
Как скрыть/удалить серые границы tabBox в блестящем R с помощью CSS
Похожие вопросы
Получить идентификатор ссылки html в django views.py
Добавляйте пробелы между каждой буквой слова HTML и CSS
CSS: селектор первого типа применяется ко всем (с использованием тега html, а не класса)
Как вернуть массив через цикл for?
Переключатель кнопки SVG
Доступность: добавление визуальной маркировки в раскрывающееся меню с помощью триггерной кнопки
Измените скрипт «src» по параметру URL и сделайте его функциональным
Режим наложения отдельных букв в слове в CSS
Как прочитать URL-адрес из файла .txt и использовать в html src?
Хотите добавить показать больше к каждому тегу <p> с помощью javascript
Здравствуйте, я отредактировал ваше сообщение, чтобы включить фрагмент исполняемого кода, пожалуйста, убедитесь, что он выполняется так, как задумано. Я ничего не менял в коде.