This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I would need to get rid of the space below the two span tags and don't understand what causes them to be there.
HTML
<div>
<span></span><span></span>
</div>
CSS
div {
border: 1px solid gray;
display: inline-block;
}
span {
width: 13px;
height: 25px;
display: inline-block;
}
span:not(:last-child) {
border-right: 1px solid gray;
}
Screenshot:
https://jsfiddle.net/wjy5hxnu/
You can check the updated jsfiddle here.
div {
font-size: 0px;
}
Adding font-size: 0 to div will solve the problem and if you have to use any text inside span you can add font-size directly in the span.
div {
border: 1px solid gray;
display: inline-block;
line-height: 11px;
}
Line height will lower the div to meet the line.
Related
This question already has answers here:
How to make round corners to both inside of a box and its border?
(12 answers)
Closed 10 months ago.
I am trying to make this border
black border: 2px
white border: 1 px with border radius 4 px
Issue - I have tried using pseudo elements but not able to fill corners, its looking like this image below
what i have achieved with pseudo elements
Can i have the css to get this desired border?
Might be wrong, but I think the the black one is not a border indeed; just a div:
body {
background-color: red;
}
#black-border {
background-color: black;
width: 250px;
height: 150px;
padding: 10px 15px;
}
#white-border {
border: 8px solid white;
background-color: white;
border-radius: 15px;
height: 132px;
}
#inner-red {
background-color: red;
width: 100%;
height: 100%;
border-radius: 5px;
}
<div id="black-border">
<div id="white-border">
<div id="inner-red"></div>
</div>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I'm kinda lost, because this is weird for me, it's supposed to not have gap between either button or hyperlink tags, because i use display: inline-block. I'm not using margin, and chrome inspector also telling me that there's no margins in-between.
Screenshot: https://i.stack.imgur.com/P7L2w.png
.titlebar {
width: 100%;
height: auto;
background: var(--titlebar-color);
user-select: none;
-webkit-app-region: drag;
}
.titlebar * {
-webkit-app-region: no-drag;
height: 100%;
}
.titlebar a {
all: unset;
display: inline-block;
cursor: default;
padding: 1px 11px;
text-align: center;
font-family: 'Inconsolata', monospace;
background: var(--titlebar-button-color);
}
.titlebar a#titlebar-title {
background: var(--titlebar-button-title-color);
}
I also using normalize.css and skeleton.css.
Codepen: https://codepen.io/mahesha-c-gumelar/pen/jOBJgOK
How can I remove the gap between hyperlink block, any help is appreciated. Thank you.
Write item's html tags without enter or space, Like this:
a {
display: inline-block;
width: 100px;
height: 40px;
background: gray;
color: #fff;
text-align: center;
line-height: 40px;
}
<div class="test">
123
</div>
You can write font-size: 0 on the parent element, but set it back on the a tag
enter image description here
This question already has answers here:
How to avoid double border from the multiple <li>
(2 answers)
Closed 3 years ago.
I have a little widget of adjacent divs created by angular ng-repeat.
It looks like this (vertical borders except for forst & last look like they are 2px which suggests border-collapse isn't collapsing:
What I want it to look like is this, except with a left border on the first box. (css specifies no left border)
.
I can of course, set a border-style: solid on just the first box to get a left border, but I am creating these widgets programatically with AngularJs which means I would have to right logic to have different css on the first widget than the other 7. But it seems like I should be able to get what I need with the same css on all the divs if collapse worked as expected.
Here's current CSS I used with all the little tricks I saw in various posts on the subject to avoid the double vertical border.
.container {
display: flex;
flex-direction: row;
margin-left: 5px;
}
.item {
display: table-cell;
border: 1px solid gray;
border-spacing: 0px;
border-left-style: none;
background-color: #fffff7;
border-collapse: collapse;
box-sizing: border-box;
}
border-collapse doesn't do anything to table-cell styled elements, it's used with display:table.
Your code looks this way because you are applying a 1px wide border to every element, causing them to stack next to eachother and become 2px.
Because you didn't supply HTML I create something simple, but this should give you an idea of how you could handle borders if you want to use flex-box.
.container {
display: flex;
flex-direction: row;
margin-left: 5px;
}
.container > div {
display: table-cell;
border: 1px solid gray;
border-left: 0;
border-spacing: 0px;
background-color: #fffff7;
padding: 5px;
font-size: 20px;
}
.container > div:first-child{
border-left: 1px solid gray;
}
<div class="container">
<div>O</div>
<div>O</div>
<div>O</div>
<div>O</div>
<div>O</div>
<div>O</div>
<div>O</div>
<div>O</div>
</div>
P.S. You should probably use grid for this instead of flexbox
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 4 years ago.
If you click on my header (jsfiddle below), a new div will slide down with text in it, and if you click the close button, it will close. My problem is that the header and the close button are not on the same line or there is unwanted or unequal space between the borders and the element(s). (maybe because they do not have the same font size?)
jsfiddle: https://jsfiddle.net/0hgo69s1/
Chrome Inspector: https://prnt.sc/mob4t7
.con {
width: 40%;
color: black;
border: 1px solid black;
transition: ease all 0.2s;
}
.con:hover {
border: 1px solid limegreen;
}
.header,
.close {
display: inline-block;
text-align: center;
cursor: pointer;
}
.header {
width: 90%;
color: black;
font-size: 14px;
text-transform: uppercase;
font-family: 'Open Sans';
}
.close {
width: 10%;
color: black;
font-size: 18px;
font-family: 'Open Sans';
}
.close:hover {
color: red;
}
<div class="con"><!--
--><div onclick='alert("open")' class="header">HEADER</div><!--
--><div onclick='alert("close")' class="close">×</div><!--
--></div>
In order to vertically center them i tried:
using flex display, and setting line height,
adding margin and padding to equalize the distance
setting a specific height to both
The .header and .close divs both have different font sizes (18px) and (14px) respectively. If you use vertical-align: middle on both elements they should match.
Alternatively, using display: flex and align-items: center on the container will achieve the same.
Add this two lines to your .con element
.con {
display: flex;
align-items: center;
}
https://jsfiddle.net/fcqmkxe2/6/
This question already has an answer here:
select the whole <td> on click instead of only the <a> inside of it
(1 answer)
Closed 7 years ago.
I have a table where I have some <a>'s, what I want: make clickable the full <td> which contains those <a>'s.
Pasting my code will explain what I want better
<td>
<a><span>{{:: row.spread.spread}} ({{:: row.spread.moneyLine}})</span></a>
</td>
for now the only clickable area is the one with red border
Here my css
td {
border-bottom: 0;
font-weight: bold;
padding: get-space(x-small) + 2;
text-align: center;
vertical-align: middle;
a {
border: 1px solid red;
}
OK, all I need is take approach of the full td and make them clickable instead of only be able to click over the links, is that clear for you?
Remove padding from the td and add it to the a, like this:
td {
border-bottom: 0;
font-weight: bold;
padding: 0;
text-align: center;
vertical-align: middle;
a {
border: 1px solid red;
display: block;
padding: get-space(x-small) + 2;
}
}
Also, make sure you set display: block on the anchor element.
in jQuery
$('td').click(function() { window.location = $('a',this).attr('href') });
add to your CSS to improve the UX
td { cursor: pointer }