I just stumbled upon this issue where the height of the <span> is greater than the font size I have set. Here it is:
span {
font-size: 36px;
padding: 0px;
line-height: 1;
background:red;
}
<span>Hello world</span>
Even with line-height: 1 and padding: 0px the span seems to get an extra 4 pixels of height. I noticed that display: block solves the issue but in my case that's not something practical because I need it inline.
Is there any 'trick' which would do this?
Try display: inline-block;
span {
font-size: 36px;
padding: 0px;
line-height: 1;
background: red;
display: inline-block;
}
span.last {
display: inline;
}
<span>Hello world (inline-block)</span> <span class="last">Hello world (inline)</span>
You can do it like this using css, use percentage as line-height. As your font have extra top and bottom space with total of 25%, So I gave 75% line-height
span {
font-size: 36px;
padding: 0px;
background: red;
line-height: 75%;
display: inline-block;
}
<span>Hello world</span>
Related
How do I make text spanning multiple lines, have each letter vertically aligned in CSS?
I have set the following using CSS.
word-spacing: 0px;
padding: 0px;
letter-spacing: 24px;
I think the mis-alignment is happening because I'm not using a monospaced font.
Is there a way to force all the characters in a font to be the same width to make things easier? All so they can all be vertically aligned when spanning multiple lines?
You can try out the code here.
For future reference I've copied the code below.
HTML
<div class="gridpaperfocus">
<p>paragraph one</p>
<p>paragraph two</p>
</div>
CSS
body {
font-family: Tahoma;
}
.gridpaperfocus {
background-image: url('https://i.imgur.com/HezKKmn.png');
background-color: #dcdcdc;
/* font-weight: bold; */
/* max-height: 100px; */
overflow: hidden;
position: relative;
box-sizing: border-box;
border-style: double;
margin: 16px;
/* color: rgb(255, 153, 51); */
color: #3c3c3c;
padding: 0px 30px;
/* padding: 0px; */
word-spacing: 0px;
margin-left: 32px;
letter-spacing: 24px;
line-height: 30px;
display: block;
width: 90%;
}
.gridpaperfocus p {
margin: 0px;
margin-top: 0px;
margin-bottom: 30px; /* 42px with gridpaperback.png */
}
.gridpaperfocus p:last-of-type { margin-bottom: 0px; }
If using a monospace font isn't possible then one way would be to wrap each character in a span element and force that to have a fixed width and the character to be centered within it.
Not very elegant and you'd want to employ some preprocessing rather than do it by hand - could be done fairly simply in Javascript.
Here's a trivial snippet with a couple of wide characters and a narrow one to show the idea:
span {
width: 24px;
display: inline-block;
text-align: center;
}
<span>A</span><span> </span><span>i</span><br><span>i</span><span>A</span><span>X</span>
I am dealing with text blocks (background blocks over text) and face some issues with paddings on new line. The problem occurs when the browser(e.g. mobile) cuts the text into to two lines due to lack of width. text then looks like this:
I don't really know how to set a padding css on the end of the new lines, since it could break up anywhere of the sentence. You could say put a span on it with padding, but it is not fixed where the line will break down. It depends on the width. Any recommendations?
You could apply display: inline-block but that will turn the background color into an ugly box which doesn't look as nice as having an exact width background for each line. Unfortunately CSS doesn't let us target individual lines except for the first one.
If you don't mind getting a little "creative" (or hacky) you could wrap each word in its own element in the backend or using JavaScript and apply the background color to those elements. Adjust the parent's word-spacing accordingly to eliminate gaps.
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 500px;
display: inline-block;
word-spacing: -15px;
position: relative;
padding-left: 20px;
overflow: hidden;
}
.text-container::before {
content: '';
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
z-index: 1;
}
span {
font-size: 36px;
line-height: 1.5em;
color: white;
background-color: black;
padding: 0.25em 0.5em 0.25em 0;
max-width: 360px;
}
<div class="main">
<div class="text-container">
<span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>
</div>
</div>
You can use box-shadow for this issue and display inline:
<div class="text">
<span class="text-container">A Movie in the park: Kung Fu Panda</span>
</div>
And css:
.text > span {
display: inline;
box-shadow: 25px 0 0 black, -10px 0 0 black;
background-color: black;
color: white;
}
Try to add after "Park:" and before "Kung"
padding workded!!!
change width by console browser and see result:
h1{
background-color: #ff6a6a;
padding: 33px;
display: inline-block;
word-wrap: break-word;
width:300px
}
<h1>rert ert erttttttttttttttt 00000000000000000000 dfgdfgd dfgdfgdft ertert </h1>
Use <p> tag to wrap up the text and it apparently works demo
<div class="main">
<div class="text-container">
<p id="test">A Movie in the park: Kung Fu Panda</p>
</div>
</div>
css
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 400px;
}
p {
font-size: 36px;
line-height: 2em;
color: white;
background-color: black;
padding: 0.5em;
max-width: 360px;
}
I'm quite new on web development. I'm struggling with this question for a while. Now I post my question(s) here.
The souce code is as linked: Source Code
The HTML:
<div id="wrap">
<div id="main" class="clearfix">
<ul class="ranklist" id = "ranklist">
<li class="ranklistitem font-size-0">
<div class="itemnumber divinline"> <span class="helper"></span>1</div>
<div class="userprofile divinline"><img class="profileimg" src=""/></div>
<div class="nameandcredit divinline">
<div class="username">SteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteve</div>
<div class="credit">I'm description</div>
</div>
<div class="ranktitle divinline">Total:</div>
<div class="usercredit divinline">1000</div>
</li>
</ul>
</div>
</div>
The CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
html {
background: #aaaaaa;
}
body {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
font-family: "PingHei", "Helvetica Neue", "Helvetica", Arial, "Microsoft YaHei";
font-weight: lighter;
}
#wrap {
min-height: 100%;
}
#main {
overflow-y: auto;
padding-bottom: 55px;
}
div, ul, p {
padding: 0px;
margin: 0px;
color: #ffd8d0;
}
.rewarddes
{
margin-top:10px;
display:block;
color:#ffdcc5;
overflow:hidden;
font-size:87.5%;
}
.ranklistitem {
height: 60px;
border-bottom: solid 1px #faa559;
font-size:87.5%;
}
.font-size-0 {
}
.divinline {
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.itemnumber {
line-height: 60px;
height: 60px;
background:#aa8800;
width: 6%;
text-align: right;
padding-right: 5px;
}
.userprofile {
line-height: 60px;
height: 60px;
width: 14%;
text-align: center;
vertical-align: middle;
background:#228845;
}
.profileimg {
height: 36px;
width: 36px;
vertical-align: middle;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: solid 2px #fff;
}
.nameandcredit {
height: 60px;
width: 45%;
padding-left: 5px;
background:#342389
}
.username {
height: 55%;
text-align: left;
vertical-align:bottom;
overflow:hidden;
}
.credit {
height: 25%;
font-size: 66.7%;
text-align: left;
overflow:hidden;
color:#fdff6e;
}
.username:before, .credit:after {
content:'';
height:100%;
vertical-align:middle;
display:inline-block;
}
.iconaward {
vertical-align: middle;
height: 20px;
width: 14px;
}
.ranktitle {
line-height: 60px;
height: 60px;
width: 15%;
background:#cd8912;
text-align: right;
padding-right: 0.125em;
}
.usercredit {
line-height: 60px;
height: 60px;
background:#ff0000;
width: 20%;
text-align: right;
padding-right: 0.5em;
}
I have 2 questions based on the linked(or above) code.
The 5 container div's width was set as:
.itemnumber 6%, .userprofile 14%, .nameandcredit 45%, .ranktitle 15%, .usercredit 20%. So in total they are 100%. But as you see, the last one .usercredit is not in the same line and there're margins between each div, which is not what I want.
for the .username, I have set overflow:hidden, but as you see, when there's a large string, the .username was totally disappeared. If there're spaces in the string, it will only hide the overflow part and show the front part. I want to know what's the problem?
I know it's a little bit messed up of a lot code here. But my question is as listed as above. Thanks in advance for any kind suggestion.
For the spacing, you have two problems:
Implicit spaces between inline-block elements, and
Defining widths for elements with padding.
Regarding username overflow, you have one issue:
Default word wrapping behavior is to wrap the whole word to the next line. You need to change that behavior.
Let's take a look at each of them:
Implicit Spaces
The problem is that your divs have a display: inline-block; style. Elements displayed as an inline-block have any white-space between them converted to a single space.
See the "Fighting the Space Between Inline Block Elements" article on CSS Tricks for more information on how to overcome this.
One fix, for instance, is to have the li element that is wrapping the divs to have a 0 font-size, and reset a non-zero font size to its children, e.g. in your CSS:
.font-size-0 {
font-size: 0;
}
.font-size-0 > * {
font-size: 12px;
}
Any of the links outlined in the link above would work; for example, removing spaces and newlines between your closing tag and opening tag would do the same thing, without forcing you to set and reset the font-size.
Widths for elements with padding
In CSS, a width is defined by default for an element to include only its content area (box-sizing: content-box; by default) and not the padding. Set the box-sizing to border-box and you'll be all set.
E.g.
.font-size-0 > div {
box-sizing: border-size;
}
Properly wrapping a single word without spaces
See this StackOverflow answer to see how to address the issue. You will basically need to add this to your .username rule:
.username {
...
word-wrap:break-word;
}
Final Result jsFiddle
<div>
<p>Text Text Text</p>
</div>
div {
height: 100px;
width: 500px;
margin-top: 50px;
background-color: #00f;
}
p {
font-size: 20px;
color: #000;
line-height: 0;
}
Look here: http://jsfiddle.net/pJCBv/
I'm trying to align text flush against the top of the parent div. line-height: 1; adds 1-2 pixels above and below the font which is why I'm trying line-height: 0;. But then the text sticks out from the parent div? It would be perfect if I could get it flush against the top (with no spacing in between).
Another question: browsers render fonts slightly different, but is the pixel height consistant accross all browsers? E.g., Will Arial measuring 11px tall be guarenteed to be 11px tall in all browsers? If this is the case then I could just set the line-height equal to 11px.
In my opinion using line-height: 0 is not a good idea, because it set the height of the line of text as null.
I would use absolute positioning for that matter, just adjust the top margin to position the text:
div {
position: relative;
height: 100px;
width: 500px;
margin-top: 50px;
background-color: #00f;
}
p {
font-size: 20px;
color: #000;
position: absolute;
margin-top: -4px
}
(jsFiddle)
I agree with Mathieu's answer, but if you must use line-height, do line-height: 0.8;
http://jsfiddle.net/eshellborn/8PRwa/
By the way, line-height isn't the distance from the bottom of the characters to the top, it's the distance from one line of text to the lower line.
If it's ok to make the text inline-block, then setting the line-height to zero, and set margin-top to zero, seems to work perfectly, and for different fonts.
So for the given question, just change the p css to give:
div {
height: 100px;
width: 500px;
margin-top: 50px;
background-color: pink;
}
p {
font-size: 20px;
color: #000;
line-height: 0;
display:inline-block;
margin-top:0em;
}
<div>
<p>TEXT STICKING OUT FROM PARENT DIV</p>
</div>
div {
height: 100px;
width: 500px;
margin: 50px;
background-color: #0f0;
display: flex;
}
p {
font-family: impact;
font-size: 30px;
color: #000;
line-height: 0;
margin-top: calc(30px/2.5);
padding: 0;
display: block;
}
<div>
<p>TEXT STICKING OUT FROM PARENT DIV</p>
</div>
Change div display to flex:
div {
height: 100px;
width: 500px;
margin: 50px;
background-color: #00f;
display:flex;
/*justify-content:center;
align-items:center;*/
}
p {
font-size: 20px;
color: #000;
line-height: 0;
}
<div>
<p>TEXT STICKING OUT FROM PARENT DIV</p>
</div>
Given the following html:
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
</a>
</h2>
</div>
<div class="title">
<h3>A Connections Learning Partner Program</h3>
<p>Quality online learning for high school students in Oakland County and surrounding counties.
</p>
</div>
<div class="link">
Learn More
</div>
</div>
</div>
How can I vertically align .link a (the button) within .link without giving a height or width? Like this...
Here's my fiddle
Here is one way that you can do it. Your HTML is good, no need to change anything.
For the CSS:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
See the fiddle at: http://jsfiddle.net/audetwebdesign/jsG8F/
How This Works
The trick is to use display: table on your .banner container and then display: table-cell on your child div elements, and set the % widths to 25%, 50%, 25% respectively for .name, .title, .link.
You can then use vertical-align and text-align to control vertical and horizontal placement of the various text blocks.
I added comments related to using padding-top to control white space from the top of the banner.
For the .link a element, you can adjust the left margin (or right) as needed.
These CSS rules offer you a lot of fine control over the placement of the various elements within the banner.
Backwards Compatibility
The display: table-cell property is backwards compatible back to IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
If the size of the element and banner are fixed, use margin-top to offset the element.
Marc Audet was very close but I ended up going a slightly different route.
I gave .link a a fixed top margin and made margin-left: auto; and margin-right: auto; and that did the trick.
Here is the fiddle for reference.