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;
}
I am experiencing an issue where my downloaded fonts are not showing up in Chrome. I am utilizing scss which gets compiled to css using gulp. If I directly visit http://project-name.localhost/data/fnt/Shermlock.ttf I can successfully download the font. ...
I have a link on Page A. Page B has two tabs, with the content of tabs 1 and tab 2 currently set to "display:none". I want clicking the hyperlink on page A to automatically open or activate the second tab on page B. I am seeking a solution using JavaScri ...
I am trying to create a menu with the following HTML structure: <ul> <li id="btnHome"><a href="#">Link One</a></li> <li id="btnAbout"><a href="#">Link Two</a></li> <li id="btnContact"> ...
I'm experimenting with making three lines perform different animations: line 1 rotating 45deg and translating, line 2 becoming opaque, and line 3 rotating -45deg and translating. Check out my JS Fiddle here <a href="#"><div id="menu" onclic ...
Looking for assistance in creating a password text box with an eye icon that toggles visibility. When the user clicks on the eye icon, it should change to a crossed-out eye icon and switch the input type to text. <div class="input-group show-hide-passw ...
I'm attempting to create a visually appealing underline under the active tab, but I am facing challenges in targeting the specific class. Since I am utilizing bootstrap and unable to adjust the width and margin of text-decoration or recognize an eleme ...
I am having trouble hiding the disabled options in AngularJS specifically for IE. Check out this fiddle for a better idea: https://jsfiddle.net/s723gqo1/1/ While I have CSS code that works for hiding disabled options in Chrome/Firefox, it doesn't see ...
My form has required fields that need to be completed. To alert users about blank fields, I have implemented the following code: $(document).ready(function() { $('input.required:text').focus(function() { $(this).css({'background ...
Setting up this middle div on a page presents the following situation: The Top Bar should remain sticky and stationary The Middle section should scroll as new content is added or if the user scrolls up or down The Bottom Bar sh ...
I'm trying to figure out how to place a div between two inputs with the same height and vertically aligned. It seems like a simple task, but for some reason, the code below isn't working: input{ width: 35%; border: 1px solid #A7A7A7; ...
Is there a way to apply bold styling to the text in the final row using @foreach in HTML? I am looking to emphasize the total sum of each column by displaying it in bold text. While I initially considered creating a new table below the current one solely ...
I have been working on a web application using asp.net c#. I have a div element where I applied the following style to it at the server side: spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden"); Now, I have a radiobutton list and ...
I designed a webpage using Photoshop, sliced it, saved it for the web, and uploaded the HTML file. It looks great in Firefox and Chrome, but Internet Explorer tells a different story. Does anyone know how to fix it and why there is this black padding? IE: ...
As I work on styling my app, I find myself struggling with the extra CSS classes that are added when I preview the source in a running app. It's particularly confusing when all I want to do is change the menu header background. In my app.html file, I ...
I have been utilizing SmartAdmin jqgrid to showcase data in tabular format. The number of columns in the datatable changes dynamically each time. I am converting the DataTable to a JSON object and assigning it to the jqgrid. However, it appears that jqgrid ...
Is there a way to center the content within the <div> tag on the page without adding an extra container? I can't change the generated markup but I can edit the CSS. My goal is to create CSS that allows me to use the zoom tag in IE for the print ...
Below is the CSS and HTML code, detailing a specific issue. * { box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; } body { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; } .topn ...
When working with Bootstrap 4, I encountered an issue where changing the block position from relative to fixed using a script caused the block to decrease in size. The script I used includes a .sticky class: .sticky { position: fixed !important; top: ...
I'm looking to make sure the text is positioned just above the hr tag, similar to how the logout button appears with bootstrap. This is the desired outcome: https://i.sstatic.net/gIl1b.png Here's the code I have using bootstrap : <di ...
Is there a way to change the text color of my nav-bar to white, while keeping the background as 'primary-subtle' with Bootstrap? How can I override Bootstrap's default functions using CSS when combining these two styles? Here is the code sn ...