The bottom border and heading are synchronized in their movement

Within my navigation, I am segmenting each section with text and a horizontal line. This pattern repeats for every section, as demonstrated below:

.navSectionHeader {
  font-size: 1em;
  color: #fff;
  margin-left: 5px;
  margin-bottom: 10px;
  font-family: "Roboto";
  font-weight: 700 !important;
  border-bottom: 2px solid #6c6c6c;
}

/*.navSectionHeader::after {
    content: ' ';
    display: block;
    border: 2px solid;
    border-color: #6c6c6c;
    margin-left: 0px !important;
}*/

The problem arises when the text is positioned directly against the left edge of the containing div. It should have some space to the left while maintaining that the bottom border starts at 0px from the left. Whenever I adjust the position with margin-left: 5px;, it also moves the border-bottom along with it. I even tried utilizing ::after by including !important at the end, but without any success. Am I going about this in the wrong way? Apologies, as I am new to front-end development!

Edit: The section header is enclosed within a <span> element if that has any impact.

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

https://i.sstatic.net/5WWjX.png

htmlcssheadermarginnav

Answer №1

Instead of using margin, try utilizing padding.

.navSectionHeader {
   padding-left: 5px;
}

To better understand the concept, consider the following example:

div {
   display: inline-block;
   width: 100px;
   height: 20px;
   border-bottom: 1px solid black;
   background: red;
   color: white;
}

.padding { 
   padding-left: 5px;
}

.margin { 
   margin-left: 5px;
}
<div class="margin">margin</div><br>
<div class="padding">padding</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

Tips for eliminating the gap between Bootstrap 4 columns

Is there a way to eliminate the spacing between Bootstrap columns? I have three columns set up using Bootstrap but no matter what I do, I can't seem to get rid of the space between them. <!doctype html> <html lang="en> <head> ...

javascripthtmlcssbootstrap-4

Ways to customize the color of the hamburger icon in Bootstrap 4

https://i.sstatic.net/kSuVW.jpg. Need to update the stick color to white when scrolling in responsive version, but currently it remains black. How can I change the color to white? Here is the HTML: <div class="menu_area"> &l ...

htmlcssbootstrap-4responsive

Modify the border in jQuery if a specific div exists within a list item

Here is a collection of items: <div class="wine"> <H1>Title</H1> <div class="promotion"></div></div> <div class="wine"> <H1>Title</H1> </div></div> <div class="wine"> <H1>Title& ...

javascriptjqueryhtmlcss

Creating an array of logos in ReactJS with the help of TailwindCSS

After seeing multiple implementations of this feature, I find myself struggling to search for a solution. I can only access the HTML and CSS through inspecting elements, wondering if others are facing the same issue as me. Typically, we aim to implement t ...

javascriptcssreactjstailwind-css

``There seems to be a disconnect between the Log In Form and the

I am currently engaged in a school project for a company, and part of the requirement involves developing a website. I began the development process using Xampp with Apache as the web server and MySQL as the database management system. Everything was runni ...

javascriptphphtmlmysqlauthentication

Explore two websites at once and showcase the findings together on a single page in a side-by-side comparison

I am currently in the process of tweaking a code to create a search form that can simultaneously search both Google and MyWebsite, and then exhibit the results from each side by side on one single page. (I don't need them to be compared) Here is the ...

javascriptphphtml

Trouble with closing windows in the in-app browser on Android devices

Is there a method to successfully close the in-app browser? Despite window.close working on iOS devices, it is not effective on Android. I have experimented with alternatives like window.top.close and window.open("", "_self") window.close, but none have ...

javascriptandroidhtmlmobileviber

What is preventing me from editing the contents of this div?

Hi there, I'm having an issue with changing the content of the "Emps" div in the EmployeeInformation.html file while on the MainScreen.html page. I'm trying to replace the text "DDDDDDDDDDDDDDDDDDDDDD" with the content from the Personal.html file ...

jqueryhtml

if the input field is empty, eliminate the class

Within the code snippet, a function is present which performs the following actions. It searches for an email in the input field, then converts the email to an md5 hash, and finally generates a Gravatar URL that is inserted into a class using fadeIn(); ...

jqueryhtmlcss

Tips for adjusting Bootstrap's sub drop-down menu to the opposite side when hovering with the mouse

I'm working on a menu that has a dropdown feature, and here is a snippet of the code: <li class="nav-item flyout"> <a href="#" class="nav-link dropdown-toggle nav_sp_clr {{#ifpage 'quicklink'}}active{{/ifpage}}">Quick Links ...

htmlcssbootstrap-4

The smooth scroll functionality is completely nonfunctional

My smooth scroll feature doesn't seem to be working, despite adding overflow-y: scroll; scroll-behavior: smooth; to my code. Here's the snippet: #container{ overflow-y: scroll; scroll-behavior: smooth; } .topTab{ bottom: 0; position: fi ...

htmlcss

The body content is stopping halfway down the page, causing my footer to appear in the middle of the page

For some reason, I'm having trouble getting the footer to properly align at the bottom of the page. My body only seems to go halfway up the page. I tried wrapping everything in a main tag and setting a height on that, but it always ends up stopping at ...

htmlcss

Break up a list into separate paragraphs and style each word using individual CSS

I have a user-generated paragraph that consists of a list of words separated by commas, such as "dog, cat, hamster, turtle." I want to be able to individually assign attributes to each word in the list. Check out this image for reference In the example i ...

javascripthtmlcss

Trouble Arising from the Lack of Coordination Between CSS Transition and JavaScript Update Triggered by Element

I'm currently working on a web development project that involves a list of clickable elements. When one of these elements is clicked, it should become active and trigger a CSS transition (such as a transform) with a duration of 200ms. Additionally, I ...

javascriptcsscanvascss-transitions

seamless blending effect as the opacity transitions smoothly on an element with a applied filter

I've been working with a DIV that has a blur filter applied to it, and I'm attempting to smoothly "fade in" the DIV using CSS opacity (going from 0 to 1) with a one-second transition. However, even though the DIV does fade in, it's quite gli ...

javascriptcsssvgfiltertransition

What is the location where UIWebView saves HTML5 offline files?

I'm curious about the location where HTML5 offline content is stored when saved from a UIWebView in an iOS app. Is it saved locally within my app's access, or somewhere else? ...

ioshtmluiwebviewoffline-caching

When an SVG component is contained within an "i" element, the color does not change when the div is hovered over

Is there a way to make the "icons" change color to yellow when hovered over, similar to the text? I tried using .navbar-list-item i:hover, but it only works when the icon itself is hovered over, not the div that contains it. This issue arises due to a pre ...

htmlcss

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

css.netnpmasp.net-web-api2yarnpkg

How to center content vertically in a Bootstrap 5 column div

I assumed that aligning content vertically in a div should be easier compared to using a table: Edit: I want to align the first and last columns while keeping the others as they are. <link href="https://cdn.jsdelivr.net/npm/&l ...

htmlcsstwitter-bootstrapbootstrap-5

Guide to executing multiple AJAX requests within a single Django view

As I develop my personal spending diary, I encountered a dilemma. To enhance the user experience, I aim to streamline the process of adding new items without refreshing the page. Although I created a single ajax form, I now realize the necessity for two ...

javascriptpythonhtmldjangoajax