Setting the distance between a border and a background color in CSS

Is there a way to add space between the border and background color in CSS?

Example

To illustrate, if | represents the border and # represents the background color.

In the given example, it shows as |#####|, but I would like it to be | ##### |

What would be the best approach to achieve this?

This is the code I am using for the example shown:

CSS

.nav-justified > .active > a, .nav-justified > .active > a:hover, .nav-justified > active > a:focus {
        background-color: #F0F0F0;
        background-image: none;
        color: #8f1b1f;
        left: 0;
        width: 100%;
        margin-top: -17px;
        padding-bottom: 20px;
        padding-top: 20px;
        padding-right: 20px;
        padding-left: 20px;
}

.nav-justified > li > a {
    border-left: 1px solid #d5d5d5;
    line-height: 2px;
    }

HTML

<ul class="nav nav-justified" id="tableButtons">    
    <li class='active'><a href="#">Text here</a></li>
</ul>
htmlcssborderstylesheet

Answer №1

To customize the appearance of a list, set the border on the list element, background color, and padding on the anchor tag (not the list element). Finally, apply a margin to the anchor tag.

Here is an example of how this can be done:

ul {
    list-style:none;
}

li {
  width:250px;
  text-align:center;
  border-left:1px solid #d5d5d5;
  border-right:1px solid #d5d5d5;
}

li a {
  color: #8f1b1f;
  background-color: #F0F0F0;
  text-decoration:none;
  padding:10px;
  display:block;
  margin:0 2px;
}

For a live demonstration, check out this Fiddle link: http://jsfiddle.net/RCwE6/2/

Answer №2

Adding padding to an element with background may not have the desired effect.

In this situation, you can utilize background-clip: content-box; or outline-offset

To elaborate, if you use a separate wrapper, it becomes easier to distinguish between the background and border. However, when styling the same element with a background, adding padding will not create space between the background and border unless you apply background-clip or outline-offset.

Answer №3

New Information: Check out this JSFiddle demonstration.

If you want to display a white background using margin, consider this example: JSFiddle demo available here.

Here is the HTML code snippet:

<div class="outer"><div class="inner">Name And Address Details</div></div>

CSS Styles:

.outer { 
    display: inline-block; 
    border-left: 1px solid #d5d5d5; 
}
.outer .inner { 
    padding: 5px 10px; 
    background: #ddd; 
    margin-left: 1px; 
}

In this case, think of li as outer and a as inner.

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

What is the best way to extract the text from the first visible `<td></td>` table row using jQuery?

In this particular scenario, there is a table included: <table id="table"> <thead> <tr> <th>Name</th> <th>Course</th> </tr> </thead> <tbody> <tr style="display:none"> ...

javascriptjqueryhtml

Overflow - conceal the scrollbar and prevent scrolling without cutting off the element

Whenever I implement the code snippet below: body { overflow: hidden; } The overflowing element gets clipped. However, when I try this code instead: body { overflow: auto; } The element is no longer clipped, but now a scrollbar appears where it ...

htmlcssoverflow

Having difficulties with Cypress test for dragging and dropping an element within the same area

I am experimenting with the drag and drop feature using a plugin called 4teamwork/cypress-drag-drop. I have a scenario where there are three elements stacked on top of each other. The task is to select the first element and move it under the last element i ...

htmlreactjscypress

What is the best method for submitting form data using AJAX?

I am currently facing an issue with submitting a form that I have created using HTML, JS, PHP, and AJAX. Despite my best efforts, the form does not submit as expected. I suspect that the problem lies within my insert function, but I cannot pinpoint exact ...

javascriptphphtmlajax

The png image is not displaying in the browser when using background-image with Webpack

I'm currently working with Webpack and attempting to display a png image in my Firefox browser. The issue I'm facing is that when Webpack compiles, it generates two images in the dist folder. One of these images seems to have an error as it won&a ...

javascripthtmlcsswebpack

Retrieving all elements that contain the specified search value with Jsoup

I am currently developing an Android app that involves working with HTML. Specifically, I need to extract part of an HTML body, retrieve attributes, and search for values containing a specific element. While I have successfully accomplished the first two t ...

javaandroidhtmljsoup

How come there is such a large space for clicking between my logo and the navigation bar, and what can be done to eliminate it?

* { box-sizing: border-box; padding: 0; margin: 0; } ul { list-style-type: none; } .nav-links, .logo { text-decoration: none; color: #000; } .logo { max-width: 80%; width: 20%; height: 20%; } .navbar img { width: 10%; height: auto; di ...

htmlcssimageweb

The table dynamically adjusts based on the JSON data

My goal is to design a table that displays a JSON-object with multiple levels. The challenge is to showcase all the data in one row, even when it shows as [object object] like the Id in the plnkr example. ResultData=[ { "First_name": "xx", ...

htmljsonangular

Maintaining the position of the screen as you type in information that is located outside of the container

I am encountering an issue with the input/text-area element in absolute position extending halfway outside the container. The screen position seems to follow the caret as I type, but I'd prefer to keep writing and have part of the text hidden beyond t ...

javascriptjqueryhtmlcss

Responsive Design and the Importance of Setting Min-Width in Bootstrap 3

After doing some research on Stack Overflow about defining a minimum width for a responsive layout in Bootstrap3, I encountered conflicting answers related to "media queries." My goal is to make my layout responsive up to a certain point. Once it reaches, ...

htmlcsstwitter-bootstrap

Crafting a Knob Cursor with CSS and AngularJS for a Unique User Experience

After experimenting with the jQuery Knob framework, I encountered challenges when trying to incorporate AngularJS dynamic values. As a result, I opted to create my own CSS-based arc/knobs. The knob displays three values: minimum, maximum, and current valu ...

javascriptjqueryhtmlcssangularjs

What can I do to prevent the border from breaking apart when I zoom in?

To address the problem of the 1px black border at the bottom of the header being cut off, try zooming into the page and scrolling right. How can this issue be resolved? ...

htmlcssxhtmlborder

Angular's NGX Spinner is efficiently blocking the entire page

I'm currently incorporating ngx-spinner into my Angular application, but I'm running into an issue where it's loading on the entire page instead of just a specific area. Below is the code that I'm using: <p> Hello name </p> ...

cssangularngx-spinner

What is the best way to anchor an image so that it remains fixed in its position relative to the browser or screen resolution?

I inquired about an issue a few days back, but I realize now that my explanation was unclear. To make things clearer, let me present two images to illustrate my problem. This is how it appears for me: . However, individuals with different screen resolution ...

csspositioning

Generate captivating background visuals with animated elements that evolve over time

I need help creating a dynamic background image that transitions smoothly every few seconds. The current code I have doesn't include animation, and the images are taking too long to load. Is there a way to optimize the loading time? Here's my ex ...

htmlcssanimationbackgroundbackground-image

How to target the last li element with a custom class using CSS?

I am working with a dynamic list that is populated from a SQL database. The list consists of items with different classes, such as "range1" and "range2". I need to select the last item in the list that has the class "range1", but using nth-child won't ...

htmlcsscss-selectorshtml-lists

The vertical tab layout in HTML and CSS is experiencing an issue where the active tab is not being shown above the

Currently, I am developing a web page featuring vertical tabs where each tab corresponds to an image and some content. However, the problem lies in the fact that the active tab is not displaying above the image as expected. In my attempt to resolve this i ...

htmlcsswebbootstrap-4

attaching a specific column to the right side of the browser window

Hey there! I have a challenge for you. How can I create a table with 4 columns, but only display 3 of them at all times even when resizing the browser? The 4th column should remain hidden, but I still need to be able to scroll to it if needed. Essentially, ...

javascriptjqueryhtml

"Enhance your form design with a Bootstrap Horizontal Form label paired with a subtle

How can I add a caption right below the Order label in this Bootstrap Horizontal form? The caption should be <small class="text-muted">Must be at least 200</small>. Where should it be placed? Please note that I need to place this muted caption ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Uncovering intricate CSS selector techniques

I need help with filling text in a Selenium Firefox browser. I am struggling to find the selector for entering text and it seems very complex for me. Please explain the only way I can achieve this using only CSS selectors. <div class="Gb WK"> < ...

cssseleniumcss-selectors