When nesting multiple spans within each other and giving them borders, their horizontal borders overlap by default while their vertical borders stack.
Check out a live example on JsFiddle: https://jsfiddle.net/4un9tnxy/
.html:
<span><span>a</span> + <span>b</span></span>
.css:
span { border: 1px solid black; }
To make all borders overlap, you can add the CSS property display: inline-block;.
Is there a way to adjust it so that all borders overlap instead of stacking?
In my opinion, this alternative method could be more suitable for your needs even though it doesn't involve using a span element. The outcome it provides is superior. It may not function properly in jsfiddle for unknown reasons, but it performs well in web browsers.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<td>a</td>
</tr>
<tr>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
</body>
</html>
A border is restricted to enclosing the content of a tag.
Nevertheless, you have the option to utilize additional CSS code to eliminate borders for nested spans.
/*Border styling for span*/
span {
border: 1px solid black;
}
/*Remove borders within nested spans*/
span > span {
border-style: none;
}
View the outcome here: https://jsfiddle.net/jsallans/4un9tnxy/2/
Include margin-right: -1px; as well.
p {
border: 2px solid black;
margin-right: -1px;
}<p>x <p>y <p>z</p></p></p>The code may not be the most elegant, but it could still be useful for you. Take a look at this example: https://jsfiddle.net/8yv3suhb/2/
div {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
div div div:last-child {
border-right: 1px solid black;
}
In response to your comment, here is a more versatile version of the code: https://jsfiddle.net/8yv3suhb/4/
div {
border-top: 1px solid black;
}
/* apply styling to nested div elements */
div div {
border-right: none;
}
My webpage features two radio buttons, "No" and "Yes," with the default selection being "No." I have implemented CSS styles for the checked elements, but they only work once physically selected. My goal is to apply these styles immediately on page load wit ...
I just started using Vuetify and I came across a v-list sample that I need help with. Here is the link to the Vuetify v-list sample on Github. My v-list: Code: <template> <v-card max-width="500" class="mx-auto" > <v-toolba ...
I am struggling to create a row as shown in the image. Currently, my circle is not positioned on the right side and my "P" element is not receiving the background color. Here is the code snippet: http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=preview Is it p ...
Visit the following website: I have implemented font-face on my site: @font-face { font-family: 'SegoeUI'; src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'), url(' ...
I am currently facing an issue where I need to dynamically load components. However, when some of these components are loaded, they appear with faulty or missing CSS styles due to a problematic first div element after the template. Removing this DIV manual ...
My issue is a bit tricky to describe, but essentially I have noticed a CSS attribute being added to my div tag that seems to come from a node module. The problem is, I can't seem to find where this attribute is coming from in my files. This attribute ...
Can someone help me understand how the "next" function works in jQuery? I'm trying to reveal a hidden textarea when a span element is clicked. The hidden textarea is supposed to be the immediate next sibling of the span, but it's not working as e ...
Whenever I start my NodeJS server and enter localhost:8080, I encounter the mentioned error while the page is loading. The head section of my index.html file is provided below. It's puzzling to me why this error is happening, considering that my index ...
A basic flexbox layout is displayed with an image next to text, aiming for this layout: #container { align-items: center; background: black; display: flex; justify-content: center; padding: 10px; width: 500px; /* Dynamic */ } #image { bac ...
Is there an option available in the bootstrap carousel to animate it from top to bottom and bottom to top, rather than from right to left and left to right? jsFiddle link <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval=" ...
I'm looking to add some interactive animation to an image inside a div when my mouse hovers over it. To better explain the issue I'm facing, I created a quick representation of what I want to achieve in the code below. My goal is to have the te ...
My implementation focuses on making drop down menus accessible via keyboard input using HTML/CSS and JS/jQuery events. The goal of keyboard accessibility includes: Tab key to navigate the menu elements. Pressing the down arrow key opens a focused menu. ...
My designer sent me a unique design and I'm wondering if it's possible to replicate using HTML, CSS, or JavaScript? https://i.stack.imgur.com/spB71.png I believe it can be done with CSS by creating a separate div positioned absolutely under the ...
I have created this container element: export const Container = styled.section<ContainerProps>` display: flex; justify-content: center; `; The current setup is vertically centering three list items within the container. However, I am now looking ...
Trying to set up different color section blocks with vertical text on my website's dashboard page. Similar to this example in JSfiddle: http://jsfiddle.net/afpn2y19/4/ <div id="outer"> <div id="inner"> //Feeling lost - ho ...
Looking for a way to trigger the animation rules of the <animate /> tag using only HTML and CSS. Is there a new standard in HTML and CSS that allows something like input:checked ~ svg animate {enabled:true;} coming up in 2020? Or some other creative ...
I am currently working on a website featuring moving clouds traveling across the screen from left to right. Although I have successfully implemented the animation for the clouds, there is one specific issue that has me stuck. My goal is to display some of ...
I'm struggling to find the right CSS positioning for a button on my page. I want the button to stay fixed in a specific location, but when there's a lot of content on the page, I need it to adjust its position accordingly. Initially, I want the ...
When working with MUI to create a form, I noticed that the default TextField bottom border is grey, turns blue when focused, and then back to grey when focus is lost. My goal is to prevent it from losing the blue color after filling in the field: https:// ...
Just wondering, could there be something in my code that's preventing <div class="rating"> from moving closer to the center? And is there a way to make it move closer horizontally? (On a side note, CSS layout and positioning still puzz ...