What could be causing the variation in thickness between these 1px divs?

Why do the divider lines in this section of my website appear to be different sizes even though they have the same pixel height? Take a look at the code snippet below for reference.

Are there any alternative methods for creating visually appealing section divider lines?

https://i.sstatic.net/R5PTc.png

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%);
}
<div class="seg-2">
  <div class="seg-2-line seg-2-sizeing"></div>
  <div class="seg-2-flex-container seg-2-sizeing"></div>
  <div class="seg-2-line seg-2-sizeing"></div>
</div>

htmlcssline

Answer №1

experiment with the <hr> element and add some custom CSS styles

Answer №2

Typically, a border is utilized for creating horizontal rules, isn't it?

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%);
  
}
<div class="seg-2">
  <div class="seg-2-line seg-2-sizeing"></div>
  <div class="seg-2-flex-container seg-2-sizeing">
    <div class="seg-2-text">
      <h2>Secure cleanup with one click</h2>
      <p>HI, HI</p>
    </div>
  </div>
  <div class="seg-2-line seg-2-sizeing"></div>
</div>

Answer №3

Why not consider using the hr element as you had intended?

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;
}
<div class="seg-2">
  <hr/>
  <div class="seg-2-flex-container seg-2-sizeing"></div>
    <hr/>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Designing a custom style for a select box using CSS and HTML

Recently, someone assisted me in removing the outline of my select box in my debut bootstrap-django project. Now, I am seeking your guidance on altering the border color property of the options box itself from blue to yellow. Strangely, when the select box ...

javascripthtmlcssdjangobootstrap-4

Div background image adjusting for parallax scrolling

My goal is to implement a parallax background as a separator for a website. However, I'm facing an issue where the background image only occupies half of the intended size with a white border surrounding it. Despite my efforts, I can't pinpoint t ...

cssbootstrap-4parallax

A guide on restricting overflow in React Spring Parallax 'pages'

Currently, I have integrated React Spring Parallax () into my project found at this link: https://codesandbox.io/s/parallax-sticky-scroll-2zd58?file=/src/App.js Upon clicking the button to navigate to the next section, it is noticeable that the image over ...

cssreactjsparallaxreact-spring

Error encountered during submission due to integrity issues

I am currently working on an application that allows users to report a film to the admin database. The issue I am facing is that when I try to report a movie by clicking on the report button and filling out the report_form template, I encounter the followi ...

pythonhtmlmysqldjango

When resetting a form, the styled radio buttons remain selected and do not deselect

I have a set of three styled radio buttons for car rental pickup locations: <div class="col-md-12 form-group"> <label for="car-rental-pickup-location" class="mb-2">Pickup Location<small class="text-danger">*</small></label>&l ...

javascripthtmlcssbootstrap-4

Tips for submitting a form using a GET request when reloading the page

Is it possible to submit a form using a GET request upon page reload in an ASP.NET Core MVC web application? I'm looking for solutions with either Javascript/JQuery or without. Appreciate any guidance provided. Thank you! ...

javascriptjqueryhtmlasp.net-core-mvc

Creating a scrollable interface for horizontal button navigation

Is there a way to create a horizontal button scrollbar using only HTML and CSS? I want it to look like this: https://i.stack.imgur.com/RWFRt.png After searching online for a solution, I came up with the following code: .myBtnContainer{ display: gri ...

htmlcss

Animating Angular ng-template on open/close state status

I am looking to add animation when the status of my ng-template changes, but I am unable to find any information about this component... This is the code in my report.component.html <ngb-accordion (click)="arrowRotation(i)" (panelChange)="isOpen($even ...

htmlcssangulartypescript

Refresh the jQuery widget tab's div after the table update is complete

I am implementing a jQuery tab that shows table data with an editing function using Lytebox for pop-up forms. The issue I'm facing is the need to refresh the page to update the content, which confuses me regarding the URL and the update process. I hav ...

javascriptphpjqueryhtml

The LI element containing a DIV

I am facing an issue displaying a list with hidden divs. The toggleSlide() function from jQuery is used to show/hide the DIV elements whenever the LI element is clicked. The problem arises when the DIV becomes visible; it overlays the other elements inste ...

javascriptjqueryhtmlcss

At the ready stance for a particular grade of students attending a class

I have created a page with a navigation menu that can be scrolled using the wheel mouse. My goal is to ensure that the li item with the 'selected' class is always positioned in the first position on the left. Is there a way to achieve this using ...

javascriptjqueryhtmlcss

center a horizontal line using StyledSheets in your project

After drawing a horizontal line, I noticed that it is positioned towards the left side of the screen. I am hesitant to increase its width. Are there any other methods to move it to the center? I attempted wrapping it with another view and using alignConten ...

javascriptcssreactjstypescriptreact-native

Is there a way to stop CSS from randomly changing rotation direction after numerous rotations in Safari?

I was tasked with creating a card element that consistently flips in the same direction when clicked. The code snippet I found achieved this perfectly, but only worked on Chrome and Firefox. However, when testing it on Safari on both iOS and MacOS, I encou ...

javascripthtmlcsssafaricss-transforms

jQuery appears to be unresponsive or inactive

I'm trying to implement a jQuery script that will slide in a header after scrolling on the page, but for some reason, it's not working. When I reach the 3rd line, my code editor displays a !read only alert, suggesting there may be a syntax issue? ...

javascriptjquerycss

Uncovering the hidden gems within a data attribute

Trying my best to explain this clearly. What I have is a data-attribute that holds a large amount of data. In this case, I need to extract each individual basket product ID and display them as separate strings. The challenging part for me is locating thi ...

javascriptjqueryhtml

JavaScript code for opening and closing buttons

I created a button that successfully opens, but I am struggling to figure out how to close it. Can someone assist me with this? Additionally, I have one more query: How can I remove the border when the button is clicked? document.getElementById("arrowb ...

javascripthtmlcss

Tips on incorporating a button to enable text formatting to 'bold' within a Text Area on an HTML webpage:

In the process of creating an online text editor, I am looking to incorporate a button above the text area that can be used to make selected text and/or upcoming text bold. To provide more clarity, I envision adding a bold button similar to the one found a ...

htmlcss

What steps can I take to guarantee that a select change event occurs following the setting of ngmodel in Angular2?

I am facing an issue with a select element wherein a basic (change) handler is attached along with an ngmodel. Whenever an <option> with a ng value is set, the change handler triggers before the [(ngModel)] reflects the new values. <div> ...

javascripthtmlangularselect

Can CSS be altered dynamically in Laravel blade?

Is there a way to dynamically change CSS? I am trying to set the class=sheet padding-top: 28mm; when the size of $anArray is less than 30. If the array has more than 30 elements then apply padding-top: 28 * 2 mm;. Finally, if the array exceeds 60, use pad ...

javascriptcsslaravel

Tips for eliminating the bottom border on a nav-tab in Bootstrap 4

When a vertical navigation menu item is selected, a border appears below the item. How can I remove this border? .nav-tabs li, .nav-tabs li a { border-bottom: none; } Here is a picture of the border: ...

cssbootstrap-4