I want to make span height as "S" capital letter, but it seems that it is not possible by looking into:
https://developer.mozilla.org/en-US/docs/Web/CSS/length
The closest being something
height: 1.5ex
it seems. Or I'm missing something?
You could simply use 1em. It is defined as the font-size so the capital "S" gets included.
You could try this:
http://www.css3.com/css-font-stretch/
Or give it a display:inline-block, that should let it do what you want.
Assuming you don't want to make it a block element, then you might try:
.title {
display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
line-height: 2em; /* or */
padding-top: 1em;
padding-bottom: 1em;
}
But the easiest solution is to simply treat the .title as a block-level element, and using the appropriate heading tags <h1> through <h6>.
Related
I have this code:
<p style="line-height: 1;overflow: hidden;">blah_blah</p>
<p>blah_blah</p>
<p style="line-height: 1;overflow: hidden;">qypj;,</p>
<p>qypj;,</p>
which results in (notice no underscore, and cut characters):
That is, it behaves that way in Firefox (66.0.3 on Windows 10). Other browsers seem to render the underscore. The above snippet runner also seems to work (even in Firefox), unless you run it in "Full page".
This Q is similar to Text changes height after adding unicode character except there are no tricks here. "_" is just a simple ASCII character.
My question is which behavior is the correct one.
Is specific character allowed to change line height (I thought it was only supposed to be font dependent)? Shouldn't line-height: 1 imply it can fit exactly any text?
I suppose some characters are special, such as "p", "g", "j" (and possibly "_") that draw below its line. Still which behavior is the correct one. Is it considered overflow or not?
PS: Furthermore I find it funny either overflow-x: hidden;overflow-y: visible; and overflow-x: visible;overflow-y: hidden; still causes this. Which seems more like an actual bug to me.
My question is which behavior is the correct one.
All of them are correct because we don't have the same default font in all browsers and it's also different depending on the OS.
Is specific character allowed to change line height (I thought it was only supposed to be font dependent)?
Character doesn't change line-height. To be more accurate, line-height is a property that can only be changed by setting line-height but you are probably confusing with the line box that is defined by the line-height and a character alone cannot change it.
Shouldn't line-height: 1 imply it can fit exactly any text?
Not necessarely, line-height:1 means that the line box will be equal to the 1xfont-size 1 but is the font designed to include all the character inside this space? Probably most of them will do but we don't know.
Basically, you have two things to consider. The content area that is defined by the font properties and the line box that is defined by the line-height. We have no control over the first one and we can only control the second one.
Here is a basic example to illustrate:
span {
background:red;
color:#fff;
font-size:20px;
font-family:monospace;
}
body {
margin:10px 0;
border-top:1px solid;
border-bottom:1px solid;
animation:change 2s linear infinite alternate;
}
#keyframes change {
from {
line-height:0.2
}
to {
line-height:2
}
}
<span >
blah_blah
</span>
The red is our content area and its height is defined by the font properties and if you inspect the element you will see it has a height equal to 23px (not 20px like the font-size) and the borders define our line box that we control using the line-height.
So if the line-height is equal to 1 we will have a line box equal to 20px which is not enough to contain the 23px of the content area thus it will get truncated and we may probably hide some characters (or a part of them) which is logical:
span {
background: red;
color: #fff;
font-size: 20px;
font-family: monospace;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<span>
blah_blah ÂÄ j p
</span>
a different font-size will remove the underscore in Firefox:
span {
background: red;
color: #fff;
font-size: 26px;
font-family: monospace;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<span>
blah_blah ÂÄ j p
</span>
Another example with a Google Font where the result should be the same cross browser. The underscore is visible but not the ^/¨
span {
background: red;
color: #fff;
font-size: 26px;
font-family: 'Gugi', cursive;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>
Another example where the underscore is not visible:
span {
background: red;
color: #fff;
font-size: 27px;
font-family: 'PT Sans', sans-serif;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>
You can clearly see that we have a different overflow everytime we use a different font which confirms that this is font related. We have no control over it unless we know how the font is designed.
Related questions:
Understanding CSS2.1 specification regarding height on inline-level boxes
Why is there space between line boxes, not due to half leading?
Line height issue with inline-block elements
Here is a good article to get more accurate details and calculation: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
A quote from this article:
It becomes obvious that setting line-height: 1 is a bad practice. I remind you that unitless values are font-size relative, not content-area relative, and dealing with a virtual-area smaller than the content-area is the origin of many of our problems.
1 : I considered a simplified explanation but in reality the calculation of the line box is not only relate to the line-height property.
The default line-height (depending on the font-family) when not otherwise specified is about 1.2 in most browsers. This includes Firefox.
This would explain why the underscore did not show in FireFox when the line-height was set to 1 - the bottom was of the line was cut off. So I don't think it's entirely to do with the font (although this does contribute), but also browser defaults.
Some font-sizes are bigger than other even at seemingly the "same" font size (as I'm sure you've seen when typing documents in e.g. Georgia vs Times new Roman/Baskerville ; so you wouldn't be guaranteed that text would always show on a specified line height of 1 (or 1.2). There are ways of measuring a font in pixels however
Hope this helps
If I use the browser tools in Firefox to inspect my snippet below, there is no height difference between the lines with and without underscore. The only difference is caused by the line-height setting: 16px with line-height: 1, 19.2 px with the browser's default line-height. So the underscore doesn't make a difference here (Firefox 66.0.3 on Mac), and it is visible in both cases.
Note that I set margins to 0 to see the "pure" line-height without distances between the lines. Also, I didn't specify a font-familiy setting, so the default font of the browser for p tags is used.
The only reason for what you describe which I can think of is a font with very particular dimensions/settings, where the descenders (i.e. the parts of letters like p q j which extend below the baseline) are not inside the line-height as defined by the font.
After a bunch of comments back and forth: I suppose it could be caused by the different default (system) fonts on Windows and Mac. Still a bug, I would say (if you are using the default font).
html,
body {
margin: 0;
padding: 0;
}
p {
background: #fb6;
margin: 0px;
}
<p style="line-height: 1;overflow: hidden;">blah_plah</p>
<p style="line-height: 1;overflow: hidden;">blah plah</p>
<p>blah_plah</p>
<p>blah plah</p>
Actually whenever there are two lines in title, it gets very close, which makes it hard to read. So can anyone tell custom CSS that I add for space in between H1 tag in Tittle?
You can change your H1 tag in your css to have a larger line height
h1 { line-height: 20px; }
Using line-height
.page-title {
line-height: 40px;
margin-bottom: 20px;
}
<h1 class="page-title">Very Very Very Very Very Long Long Long Long Page Title</h1>
Adjusting the line height should fix that
h1 {
line-height: 1.4;
}
Try to work with padding. Padding basically let's you put in some extra pixels in the wanted direction. So for instance: for your title to stay in position on your screen, add 5 px of padding-bottom.
looks like this
padding-bottom: 5px;
...or whatever amount of space you want in there but this is basically how you do it.
As per your template Link you provide at comment, You are talking about this line,
"Use Of Computer Increases To Keep The Record"
Solution:
First open style.css, then got to line 2535 or find,
article.post.hentry h1.entry-title, article.post.hentry h2.entry-title {
line-height: 26px;
margin-bottom: 10px;
Increase line-height property 26 to 36 line-height: 36px;.(increase as it looks goods to you)
This was before
This is after
It's worked for me, Let's take another try,
Try using this line-height: 36px!important;
I am working out of wordpress. I have tried using inspect element to move a line of text that is basically overlapping another line of text in the ecwid plugin.
It does not seem to work, every time I edit the css code by using margins or padding attributes nothing happens
On my page where it says $205 for the product , was $295 is touching it and I want to separate that from the actual price.
How can I achieve this?
I have tried using this code
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container{
padding-bottom: 5px;
}
here is a look at exactly what im reffering to
https://surveillanceshack.com/store/#!/Elec-Surveillance-system-w-4-bullet-&-4-dome/p/55396210/category=0
Add a line height like this:
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price {
font-size: 24px;
font-weight: 400;
color: #a20505;
white-space: nowrap;
line-height: 21px;
}
Both of your prices are included inside the same div. When you have text that wraps, the only way to separate them is to define a height between the lines.
To fix your checkout problem fix the line-height there as well on this class:
.hentry table, #comments table {
margin-bottom: 1em;
font-size: 80%;
line-height: 21px;
}
If you want to fix this problem in one single CSS set of instructions do this instead:
.hentry table, #comments table, .ecwid-productBrowser-price {
line-height: 21px;
}
The issue is that it is a span element, which does not really accept margin / padding well.
The element in question is this:
html#ecwid_html body#ecwid_body .ecwid span
So, to make it have space above it, you can add this style to the stylesheet (at the end):
html#ecwid_html body#ecwid_body .ecwid span {
display: inline-block;
padding-top: 15px;
}
Adjust the padding-top to suite your desired layout.
Alternatively, you could do this by increasing the line-height of the element (in which case it does not need to be display: inline-block):
html#ecwid_html body#ecwid_body .ecwid span {
line-height: 2.5em;
}
It is a span element, to make padding active, you need to add :
{
display :inline-block;
}
You can set padding for "was" element.
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container, html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-save-container {
padding-bottom:5px;
}
(Ecwid team here)
While the answers here can help to fix the issues yourself, we will investigate how Ecwid works with your "DMS" theme and make sure to fix those on our side. The issue is already in our devs queue, we will roll out the solution in one of the Ecwid plugin updates in the near future.
This is my code:
<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div>
This is what it currently looks like:
http://i48.tinypic.com/2dqvo1i.png
Is there a way to add padding to the sides of the highlighted text? Regular padding on the SPAN doesn't work, because it only takes into account the the beginning and end of the sentence, not every line separately.
Any ideas? CSS3 code is fine.
After struggling for some time I found a non-quirky solution with a decent fallback for older browsers – adding two CSS3-shadows to the lines of text:
span {
background:#ff0;color:#000;
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}
white-space: pre-wrap;
Not really a solution, but does add some space before the break.
Just pad the "p" tags that surround the spans. The "p" tag (unlike span) is a block-level element, so padding on the top, bottom, or sides will work as expected.
Try inline-block. It won't work in anything older than IE8 (though there are some work arounds), but everything else popular should be fine:
p span {
display: inline-block;
padding: 0 2em;
}
A simple way is to add this to your style sector definitions:
span {
padding-left: 8px;
padding-right: 8px;
}
Also it works for "p" (and for others) instead of "span".
Finally found a way out this misery. Worked for me. Use a button on the left like this.
<p>
<button class="blankspace">
</button>
<span>
</span>
</p>
and css it like
.blankspace {
background: none;
opacity: 0.0;
outline:0;
text-decoration: none;
width: 2%;
height: 80%;
margin:0 auto;
float:left;
text-align:right;
padding:0%;
font-size:2px;
}
Instead of adding two CSS3-shadows as suggested, here is a much simpler answer:
use display:block
<span> is display:inline by default, so the borders and padding you added aren't actually affecting it's size. So only the first line is affected.
Use display:block on the span and <span> now works like <p> and <div>.
Here's a good explanation:
http://quirksmode.org/css/css2/display.html
I'm trying to implement an outdent of the first letter of the first paragraph of the body text. Where I'm stuck is in getting consistent spacing between the first letter and the rest of the paragraph.
For example, there is a huge difference in spacing between a "W" and an "I"
Anyone have any ideas about how to mitigate the differences? I'd prefer a pure CSS solution, but will resort to JavaScript if need be.
PS: I don't necessarily need compatibility in IE or Opera
Apply this to p.outdent:first-letter:
margin-left: -800px;
padding-right: 460px;
float: right;
This will position the first letter on the right edge of the paragraph, then shove it left it by more or less the width of the paragraph, then move both the letter and all the padding into the float's large negative margin so the paragraph fits in the margin and doesn't try to wrap around.
I tried using a fix-width font like 'courier new' and since the characters are more or less the same width it made it a lot less noticeable.
Edit - this font is decent but might only work for windows
p.outdent:first-letter {
font-family: ms mincho;
font-size: 8em;
line-height: 1;
font-weight: normal;
float: left;
margin: -0.1em 0 0 -.55em;
letter-spacing: 0.05em;
}