I'm trying to implement a colored underline by putting the selected text in a span element and then giving the span a colored bottom border, like
border:bottom: 1px solid red;
This works, but the line is too far under the word:
Here's the border around the entire span element:
Does anyone see a way to reduce the height of the span element so the bottom border is closer to the word?
Thanks
Inline elements don't have a height, so you can change the display property to something like inline-block, and then use the line-height property to move the border closer:
span {
border-bottom: 1px solid red;
display: inline-block;
line-height: 10px;
}
Does anyone see a way to <span>reduce</span> the height of the span element so the bottom border is closer to the word?
You can also use height.
span {
border-bottom: 1px solid red;
display: inline-block;
line-height: 20px;
}
Does anyone see a way to <span>reduce</span> the height of the span element so the bottom border is closer to the word?
Related
I have converted my problem into a simple code. I wanted span class block with class in to be exactly wrapping up the div class. It is coming outside diagonally at right bottom out of div. Can somebody help. Idea is that in the larger problem I am trying to solve, want to be able to create border sometimes with div and sometimes with span. Can somebody help in how to make these div and span just on one another?
.checker {
width: 17px;
height: 17px;
border: 10px solid green;
display: inline-block;
}
.in {
width: 17px;
height: 17px;
border: 10px solid red;
display: inline-block;
}
<div class="checker" id="uniform-deleteradio_0"><span class="in"></span></div>
Update on 14/3. Thanks for all the answers. Some of the techniques would make the inner span come within external div. But, what I want is like both div and span to be wrapped one on top of another. Say, I give border to either div or span, it should look like single border and both div and span look like single element. That's the situation in my actual project and I cannot eliminate either of div or span. span has one image as background (checkbox) and outer div has a border.
I think the problem is that your inner span is exceeding the size of the surrounding div box because of the border. You could make your outer div bigger (+20px) to fit the inner box.
Remove the height and width from the outer div, so it is allowed to be big enough to fit the inner sized div. I also changed the display property of the inner div to block.
<!DOCTYPE html>
<html lang="en">
<style>
.checker { border: 10px solid green; display: inline-block; }
.in { width: 17px; height: 17px; border: 10px solid red; display: block; }
</style>
<div class="checker" id="uniform-deleteradio_0"><span class="in"></span></div>
</html>
You should put the height and width of .checker to 'auto'. Fixed width and height will of course put any child to outside the div if it will not fit
This worked for me finally.
margin-left: -10px
margin-right: -10px
I have an h1 and I want to put a border around the inner text only. The problem is that the border will naturally fill the entire block which means it covers the length of the page.
I can't turn it into a span because I need the text to be horizontally centered in the middle of the page.
How do I get the border to only wrap the text?
Simply give the element a display of inline-block, and apply text-align: center on the parent:
h1 {
display: inline-block;
border: 1px solid black;
}
div {
text-align: center;
}
<div>
<h1>Title</h1>
</div>
I know how to solve the problem, read the comment Please, I am looking why i have this problem in the first place, it just weird,
Please read the comment in the style code
Problem : I have this weird problem that, input border width is effecting the position of div, for example if i gave border width 5px to input; span will start after 5 px in relation to the parent, and if i give border width 10px to input span will start after 10px from it's parent div?? it kinda consuting, may be i am missing some thing obvious,
Here is the code snippet
.mainDiv {
display: flex;
}
input {
height: 100%;
/*To change understand the problem
just change the border width*/
border: 10px solid blue;
}
div div {
border: 2px solid black;
height: 30px;
/*i can solve it by displaying this
container as flex container as well*/
}
span {
border: 2px solid red;
/*First Edit Display them inline block
and also give height*/
display: inline-block;
height: 30px;
}
<form action="">
<div class="mainDiv">
<div>
<input type="text" required><span>not good</span>
</div>
</div>
</form>
There is a horizontal gap between the input and the span from whitespace. If you remove the whitepsace between the elements, that horizontal gap goes away.
<input type="text" required><span>not good</span>
There is a vertical gap between the top of the parent and the top of the span because the elements are aligned at the baseline of the text. Notice the bottom of the input, inside its border, and the bottom of the span line up.
I'm trying to decrease the distance between the text in the h1 element and the border to the right so it looks like a small vertical line which separates it from the following text.
This is what my current css looks like:
.test{
border-right: 2px solid black;
padding-right: 0px;
}
The right border still appears very far on the right although I thought through setting the padding to 0px at the right it should appear directly next to the text.
I guess this is a pretty dumb question, I am still a beginner!
Thanks in advance
h1 elements are display: block by default (with width: 100%), which means they stretch to the full width of their container.
If you want to have the element only be as wide as it needs to be, make it display: inline-block instead (and then use padding, as you've identified, to determine the distance between the end of the text and the right border):
.test{
border-right: 2px solid black;
padding-right: 0px;
display: inline-block;
}
<h1 class="test">This is a test</h1>
h1 elements are display:block by default, 100% width by default. Try changing width:300px or display:inline-block.
I have two rows:
<div>
The first row
</div>
<div>
The <span class="boxed">second</span> row
</div>
The word "second" is in a yellow box with padding:
* { box-sizing: border-box; }
div { border: 1px solid black; }
.boxed {
background: yellow;
padding: 0.5em;
}
As you can see I am using the border-box model. But the yellow box does not. Or does it?
I expected the second row to be as high as the yellow box, but that did not happen. There is no float, no CSS position, but still the yellow box overflows the div. How can I make the second div row contain the yellow box inside of it?
There is a fiddle here: http://jsfiddle.net/lborgman/9xEgA/
Inline boxes are not affected by box-sizing since they are never affected by the width and height properties. When you add padding to inline boxes, all that does is cause their backgrounds to expand, pushing only their left and right edges away from surrounding content, but not their top and bottom edges (since the line height is not altered). That's why it overflows. See sections 10.6.1 and 10.8 of the spec for more details.
If you want to hide the overflow, use overflow: hidden:
div { border: 1px solid black; overflow: hidden; }
Otherwise, if you want to make the second row expand to contain the yellow box, you might be able to make the yellow box display: inline-block without any adverse side-effects:
.boxed {
display: inline-block;
background: yellow;
padding: 0.5em;
}
Try adding display: block to the span. Inline block elements sometimes alter the document flow in strange ways when you do things like add padding to them. See this updated fiddle
You can use display: inline-block property for your .boxed span.
.boxed {
background: yellow;
display: inline-block;
padding: 0.5em;
}
JSFiddle