I would like to raise the meter bar X pixels to be centered with the text height (on either side of the bar). I want only the meter bar to be raised, and the text to remain in position.
I've tried padding-bottom but it raises the whole line.
Many thanks,
meter::-webkit-meter-bar {
height: 10px;
}
TEXT <meter value="0.5"></meter> TEXT
Give this a go!
meter::-webkit-meter-bar {
height: 10px;
margin-top: 2px; /* (16px - 10px) / 2 */
}
#meter {
font-size: 16px;
line-height: 16px;
}
<div id="meter">
TEXT <meter value="0.5"></meter> TEXT
</div>
If you wanted the font smaller, you would update it to something like this:
meter::-webkit-meter-bar {
height: 10px;
margin-top: 1px; /* (12px - 10px) / 2 */
}
#meter {
font-size: 12px;
line-height: 12px;
}
<div id="meter">
TEXT <meter value="0.5"></meter> TEXT
</div>
Related
I create a div containing some text with some simple css:
.textBox {
display: inline-block;
font-size: 50px;
}
The container is simply:
<div class="textBox"> Test </div>
Nevertheless, the text isn't perfectly vertically centered within the div. There are 13px above and 11px below. Hence I would like the height of the div to be exactly as the height of the text.
So that's pretty hard. As a lot of people suggested you should probably consider line-height. But the problem with that is that the default styling rules won't know what letters you're gonna use. For example are there normal captials like M or maybe you'd use something like Â, then it needs to be bigger right? Or Q and it needs to be lower.
It really is too bad that there isn't any shrink-to-text property in this case. Maybe line-height with some trial and error will be enough for you.
.textBox {
display: inline-block;
background-color: darkcyan;
font-size: 50px;
line-height: 0.68em;
}
<div class="textBox">Test</div>
Not sure what your intened result should be. But if you want to highlight text for example, even line-height isn't precise. In that case I fall back at a helper tag that I'll style to fill the background behind my text. It's a bit more code though and as shown in the example for each font you need to find the correct settings again.
/* Setup textBox properties */
.textBox {
display: inline-block;
position: relative;
}
.textBox{ font-size: 50px; }
.textBox:hover{ font-size: 200px; }
/* Setup default properties for the marking*/
mark{
background-color: darkcyan;
position: absolute;
z-index: -999;
}
/* Specific setting first font-family */
.serif{
font-family: serif;
}
.serif mark {
height: 0.68em;
top: 0.25em;
left: 0.03em;
width: calc(100% - 0.03em);
}
/* Specific setting second font-family */
.sans-serif{
font-family: sans-serif;
}
.sans-serif mark {
height: 0.73em;
top: 0.2em;
left: 0.08em;
width: calc(100% - 0.08em);
}
/* Specific setting last font-family */
.verdana{
font-family: Verdana, sans-serif;
}
.verdana mark {
height: 0.94em;
top: 0.28em;
right: 0.09em;
width: calc(100% - 0.09em);
}
<div class="textBox serif">
<mark></mark>
Test
</div>
<br>
<br>
<div class="textBox sans-serif">
<mark></mark>
Meet
</div>
<br>
<br>
<div class="textBox verdana">
<mark></mark>
Testing
</div>
You can use:
height: fit-content;
like this:
.textBox {
display: inline-block;
font-size: 50px;
height: fit-content;
}
Use the property ,height : fit-content ; to the div
<html>
<body>
<div style="padding:0;margin:0;background-color:yellow">A</div>
</body>
</html>
This example shows there's still inner spacing above and below letter 'A'. Can that space be removed? Looking at this example: I would like to have no yellow pixels above or below letter 'A'.
In case that cannot be done, is there another way to have two elements one below the other with at most two pixels of space between text in those elements?
If you don't want the parent div to have any space above and below the character, you'll have to match the line-height of the div to the cap-height https://en.wikipedia.org/wiki/Cap_height - but it could be tricky with decenders - https://en.wikipedia.org/wiki/Descender . : / - but if you explain what you want to accomplish - I bet there is a better way. : )
div {
background: red;
margin-top: 2rem;
}
.normal {
/* no rules for space */
}
.line-height {
line-height: 0;
}
.line-height-b {
line-height: .1;
}
.height {
height: 0;
overflow: hidden;
/* not going to see this... */
}
<div class='normal'>A</div>
<div class='line-height'>A</div>
<div class='line-height-b'>A</div>
<div class='height'>A</div>
Try setting the CSS line-height property value less then the font-size.
padding: 0;
margin: 0;
background-color: yellow;
font-size: 16px;
line-height: 12px;
<div style="line-height: 11px; height: 12px;background-color:yellow;">A</div>
Use combination of line-height and height.
I created multi-line-padded text based on Matthew Pennell's solution (codepen by CSS Tricks). In Chrome all looks fine, but in Firefox height of span elements bigger than height of their ancestor. If I adjust vertical padding for Firefox, in Chrome will be same problem, and vice versa.
Why it happens? What the real technical reasons of this problem?
HTML Code:
<div class="padded-multiline">
<h1>
<strong>How do I add padding to subsequent lines of an inline text element?</strong>
</h1>
</div>
CSS Code:
:root {
font-family: Arial, sans-serif;
font-size: 20px;
}
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}
Setting a line-height: 1; on strong will fix the problem also read my comment.
Chrome and Firefox seems to use different text layout system.
In Chrome it will floor the line-height attribute and Firefox seems to use the correct one.
To achieve the same effect for title, just use only the outline.
H1 does not need strong.
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding:1px;
color: #fff;
display: inline;
outline: 10px solid #c0c;
margin: 0;
font-size:16px;
}
<div class="padded-multiline">
<h1>How do I add padding to subsequent lines of an inline text element?</h1>
</div>
Here is codepen: http://codepen.io/anon/pen/vgRvjM
If you need exactly visual (that means less purple space from top and bottom, you can use for example border from after and before):
.padded-multiline:before{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
top:-3px;
}
.padded-multiline:after{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
bottom:-3px;
}
Codepen for this solution: http://codepen.io/anon/pen/QdmzxK
Unfortunately, there isn't a full and clean crossbrowser workaround. Because different UAs render text different, height of each textline may be taller a bit (or vice verca). So, I create a solution based on SCSS calculations of required box' sizes, and hide artefacts via overflow property.
Here is my solution, if you meet the same problem: http://codepen.io/ifiri/pen/ygEeeL
HTML:
<p class="multiline-text">
<span class="multiline-text__wrapper multiline-text__wrapper--outer">
<span class="multiline-text__wrapper multiline-text__wrapper--left">
<span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span>
</span>
</span>
</p>
SCSS:
/*
Variables
*/
$base-line-height: 1.75;
$base-font-size: 1.25em;
$multiline-padding-base: ($base-line-height / 2) * 1em;
$multiline-padding-horizontal: $multiline-padding-base;
$multiline-padding-vertical: $multiline-padding-base - (1em / 2);
$multiline-bg-color: #a5555a;
$multiline-font-color: #fff;
/*
= Snippet Styles
This code is required
*/
.multiline-text {
color: $multiline-font-color;
padding: 0px $multiline-padding-horizontal;
// hide line-height artefacts
overflow: hidden;
position: relative;
}
.multiline-text__wrapper {
background-color: $multiline-bg-color;
padding: $multiline-padding-vertical 0px;
}
.multiline-text__wrapper--outer {
// Inner padding between text lines
line-height: $base-line-height;
}
.multiline-text__wrapper--left {
position: relative;
left: -($multiline-padding-horizontal);
}
.multiline-text__wrapper--right {
position: relative;
right: -($multiline-padding-horizontal / 2);
}
Im currently creating a print css! Because i have to print on a template i use mm as unit!
My problem is how you can see that the red text is not aligned to the top of the white box, it seems like the white box has a padding! I would like to have the text exactly 1 mm below the red line. I tried to give the text a margin-top:1mm but the text stayed at the position! http://jsfiddle.net/WkhPb I would like to keep mm as unit what do i have to change? Thanks
My html:
<div id="box">
<div id="adress">
<a>Das ist Box 1</a>
</div>
</div>
Css:
#box{
height:40mm;
width:90mm;
background-color:yellow;
padding-left: 6mm;
padding-right: 5mm;
padding-top: 2mm;
}
#adress {
border: 1px solid red;
width: 30mm;
height: 20mm;
background-color: white;
}
#adress a {
color: red;
font-size: 2mm;
margin-left: 1mm;
margin-top: 0mm;
line-height: 0mm;
}
http://jsfiddle.net/WkhPb/
You can use position : absolute on your link
http://jsfiddle.net/WkhPb/3/
#adress a {
color: red;
font-size: 2mm;
position:absolute;
top:1mm;
left:1mm;
}
and position:relative on the parent
Remove the padding and margin that is applied by the browser and set it to 0;
Secondly You must set the display property of the link to block or inline-block to be able to apply margin.
*{
padding:0;
margin:0;
}
#address a{
display:block;
}
DEMO FIDDLE
You said: "I would like to have the text exactly 1 mm above the red line.."
fiddle
change your css to this:
#adress a {
color: red;
font-size: 2mm;
margin-left: 1mm;
margin-top: -2mm; /* changed */
line-height: 0mm;
display:block; /* added */
}
You need to add a line-height of 3mm on the containing div to match your font and give it the 1mm margin from the top you require. You probably would want to put a padding on the sides of the div as well so the text doesn't sit right on it.
#adress {
line-height:3mm;
padding:0 1mm;
}
Use:
padding: 0px;
Inside #adress.
How can i increase the round corner button width dynamically depends on the text size in CSS ?
i have 10 round corner buttons with different text size base, i want the solution is buttons size should increase dynamically based on text size....
Is any solution for this using HTML and CSS, or any other way to solve using scripting language.
Help..,
jsfiddle to see it in action: http://jsfiddle.net/XAU8V/
HTML:
<div class="container">
Small
Medium
Large
</div>
CSS:
.button {
border: 1px solid #96d1f8;
background: #65a9d7;
padding: 5px 30px;
color: white;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
.small {
font-size: 14px;
}
.medium {
font-size: 20px;
}
.large {
font-size: 30px;
}
The border radius is in "em", so it is in relation to the parent value (even though it's not really a parent in this example). Em's can get a little tricky due to inheritance.