Блог

Главная - Вопросы по программированию - Почему эти дивы толщиной 1 пиксель имеют разную толщину?

Почему эти дивы толщиной 1 пиксель имеют разную толщину?

#html #css #line

#HTML #CSS #линия

Вопрос:

Почему две строки в этом разделе моего сайта имеют разные размеры, когда они имеют одинаковую высоту в пикселях? Пожалуйста, проверьте фрагмент ниже.

Каковы другие хорошие методы создания разделительных линий сечений?

введите описание изображения здесь

 body {  margin: 0px; }  p, a, h1, h2 {  margin: 0px;  color: white; }  .seg-2 {  background: linear-gradient(358deg, rgba(51, 82, 124, 1) 0%, rgba(18, 59, 114, 1) 100%);  padding: 5% 0px; }  .seg-2-sizeing {  width: 60%;  margin: auto; }  .seg-2-flex-container {  display: flex;  justify-content: space-around;  margin: 15px auto; }  .seg-2-text {  flex-basis: 250px; }  .seg-2-text p {  margin-top: 10px; }  .seg-2-line {  height: 1px;  background: hsl(240deg 19% 88%); } 
 lt;div class="seg-2"gt;  lt;div class="seg-2-line seg-2-sizeing"gt;lt;/divgt;  lt;div class="seg-2-flex-container seg-2-sizeing"gt;lt;/divgt;  lt;div class="seg-2-line seg-2-sizeing"gt;lt;/divgt; lt;/divgt;

Комментарии:

1. Я не могу найти никаких проблем.

2. С моей стороны тоже нет повторения, либо на 96dpi, либо на 192 dpi (200%).

3. Я вижу это в Хроме. Верхний в «фрагменте запуска» в два раза толще или в два раза ярче, чем нижний

4. Я вернулся к более короткой версии для вас, так как она не видна в более крупном тексте

Ответ №1:

попробуйте использовать lt;hrgt; тег и применить к нему CSS

Ответ №2:

Обычно вы использовали бы границу для выполнения горизонтальных правил?

 body {  margin: 0px; }  p,a,h1,h2 {  margin: 0px;  color: white; }  .seg-2 {  background: linear-gradient(358deg, rgba(51,82,124,1) 0%, rgba(18,59,114,1) 100%);  padding: 5% 0px; }  .seg-2-sizeing {  width: 60%;  margin: auto; }  .seg-2-flex-container {  display: flex;  justify-content: space-around;  margin: 15px auto; }  .seg-2-text {  flex-basis: 250px; }  .seg-2-text p {  margin-top: 10px; }  .seg-2-line {  height: 1px;  border-bottom: 1px solid hsl(210deg 18% 87%);   } 
 lt;div class="seg-2"gt;  lt;div class="seg-2-line seg-2-sizeing"gt;lt;/divgt;  lt;div class="seg-2-flex-container seg-2-sizeing"gt;  lt;div class="seg-2-text"gt;  lt;h2gt;Secure cleanup with one clicklt;/h2gt;  lt;pgt;HI, HIlt;/pgt;  lt;/divgt;  lt;/divgt;  lt;div class="seg-2-line seg-2-sizeing"gt;lt;/divgt; lt;/divgt;

Комментарии:

1. Именно так я бы тоже это сделал, но также полностью удалил бы оба seg-2-line » s » и просто ограничил flex-container бы их . Чтобы это выглядело правильно, вам также придется заменить контейнер padding: 15px auto на margin: 15px auto;

Ответ №3:

Почему бы не использовать hr, который вам нужен?

 body {  margin: 0px; }   hr { width: 60vw; }  p, a, h1, h2 {  margin: 0px;  color: white; }  .seg-2 {  background: linear-gradient(358deg, rgba(51, 82, 124, 1) 0%, rgba(18, 59, 114, 1) 100%);  padding: 5% 0px; }  .seg-2-sizeing {  width: 60%;  margin: auto; }  .seg-2-flex-container {  display: flex;  justify-content: space-around;  margin: 15px auto; }  .seg-2-text {  flex-basis: 250px; }  .seg-2-text p {  margin-top: 10px; } 
 lt;div class="seg-2"gt;  lt;hr/gt;  lt;div class="seg-2-flex-container seg-2-sizeing"gt;lt;/divgt;  lt;hr/gt; lt;/divgt;
Метки: