I have a radiobutton that has two lines as a label. The whitespace between the lines are two much and I want to decrease them.
This is my code:
<label for="reg-promo">
<input type="radio" name="promotion" id="registerPromo" v-validate="'required'" checked="checked"
v-model="registerPromo" value="reg-promo" />
<span>
<b>Welcome Offer</b>
<p id="welcomeOfferSubtext">$35 in credits available</p>
</span>
</label>
welcomeOfferSubtext just simply adds 28px padding to the left of the paragraph:
#welcomeOfferSubtext {
padding-left: 28px;
}
Right now it looks like this:
But I want it to look like this:
What's the best way to fix it?
P.S
Please ignore the sentence differences. The focus is on spacing
I don't want to use line-height from CSS
The extra vertical space is probably coming from some other (or browser default) <p> CSS.
Either change the <p id="welcomeOfferSubtext"> to <div id="welcomeOfferSubtext">
Or add to your css:
#welcomeOfferSubtext {
padding-left: 28px;
margin: 0; // add this line
}
Firstly make span as inline-block, so that all elements within span will be aligned to span. Now you can do your css accordingly. <p> tag has some default margin, you can then modify it accordingly.
<style>
span{
display: inline-block;
vertical-align: top;
}
#welcomeOfferSubtext{
padding: 0;
margin-top: 5px;
}
</style>
I have a piece of code that compares the same line across multiple poems. It works fine, except for when the initial letter of the line appears in the manuscript original as a large capital, like this:
As you can see, when that happens the comparison gets all wonky. As far as I can tell, this is because the W is a span encapsulated inside of a div:
<div class="comparison" id="EETS.QD.1" style="display: block;">
<div class="compare_item" style="margin-left: 25px;">London, British Library Harley 2251:
<a style="text-decoration:none; color:#D5D5E5;" href="Quis_Dabit/British_Library_Harley_2251/British_Library_Harley_2251_f42v.html">
<span class="capital_2_blue">W</span>
ho shal gyve · vnto my hede a welle
</a>
</div>
</div>
with the style attributes generated via javascript because the comparison is generated onClick. The CSS I use to style both the divs and the span is as follows:
div.comparison {
display: block;
height: auto;
width: 755px;
margin-right: 10px;
padding-left: 10px;
margin-left: auto;
background-color: #454595;
border-width: 1px;
font-size: 12pt;
color: #EFFFFF;
display: none;
}
span.capital_2_blue{
float: left;
color: blue;
font-size: 60pt;
line-height: 12pt;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 20px;
}
My question is this: how can I display each of the lines so that any oversized letters appear at the beginning of the actual line of text, as expected? This is what I'm shooting for:
I've been able to achieve it, sort of, by adding display:contents to the styling for my span, but that makes the W extend outside of the generated div on the page:
How would I go about styling these elements to achieve the look I'm hoping for, with the initials staying the height they're displayed in the text proper but not wrapping as they are currently? And how do I make sure the span plays nicely with its surrounding div? Thank you.
You should remove float:left and add display:inline-block to span.capital_2_blue.
That is because floated content removed from normal flow and other content will wrap around it.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
I'm not the best at HTML. Essentially I am trying to get the effect of a lot of line breaks, without filling my code with a lot of consecutive <br> tags. What I have in my head is this CSS:
.movedown {
position: relative;
down: 120px;
}
and this HTML, where my text is:
<span class="movedown">*text here*</span>
I only need it on a single page. Anyone know where I'm going wrong?
Assuming you want to inject lots of breaks between two words you can inject a span tag styled as follows:
.long-br {
display: block;
height: 12em; /* 12em is roughly 10 lines at current font size/1.2 line height */
}
<p>Hello <span class="long-br"></span> World</p>
Alternate: if you want to insert lots of breaks between two blocks of text, the ideal way is to use margins:
.long-gap {
margin-top: 12em;
}
<p>Paragraph 1</p>
<p class="long-gap">Paragraph 2</p>
Try this:
.movedown {
position: relative; //Not required
margin-top: 120px;
}
You need to use the CSS property margin-top to add some space without using line breaks.
.movedown {
margin-top: 120px;
}
down is not an existing css rule. What you should be using is a div with margin-top, this creates a space above the element.
.down {
margin-top: 50px;
}
*top text*
<div class="down">*text here*</div>
Instead of 'down' try:
top:120px;
Just use <div> elements instead of <span>.
By default div is a block style element and span is inline.
block occupies the whole row, so each new one will be on a new row.
You can change the default behaviour with CSS but better to get a grip of the basic elements first.
This should be interesting. Here's what I'm trying to do with CSS:
The words "An Example Alignment" should be in a single <h1> element.
The word "Alignment" should be on the second line (easy with a <br /> tag).
The word "An" should be smaller than the other words (easy with a <span> tag).
So we have:
<h1><span>An</span> Example <br />Alignment</h1>
But here's the catch:
I would also like to align the first letters of the 2nd and 3rd words with each other vertically, and that's where I run into problems.
Here's what it should look like: http://jsfiddle.net/Baumr/H2Pzr/
But that's an ugly solution as there are two <h1> elements.
Any ideas of how to do this with CSS by keeping the HTML the same? Very curious to hear. Thank you in advance.
P.S. I could also put "An" into a separate <span>, but I would prefer to keep everything in a single <h1>.)
I'd do the padding by using two display:inline-block spans, to make sure the right margin is always exactly the same (font width varies, depending on the in-use font face).
<h1>
<span class="padding">An</span> Example <br>
<span class="padding"></span> Alignment
</h1>
CSS:
h1 {
font-size: 30px;
}
.padding {
font-size: 20px;
width: 30px;
display:inline-block;
}
Just beware that IE doesn't always use inline-block the right way (although in this case it should).
Update
An even better solution: http://jsfiddle.net/H2Pzr/9/
Use the table-cell display of elements to automatically put them in two columns:
HTML:
<h1>
<span class="first">An</span>
<div class="second">
Example <br>
Alignment
</div>
</h1>
CSS:
h1 {
font-size: 30px;
}
.first {
display:table-cell;
font-size: 20px;
color: #444;
}
.second {
display:table-cell;
}
I would use two span classes in the same H1 tag:
<h1>
<span class="small-text">An</span> Example
<span class="line-two">Alignment</span>
</h1>
Then update your CSS accordingly:
h1 {
font-size: 30px;
}
span.small-text {
font-size: 20px;
}
.line-two{
display:block;
margin-left: 31px;
}
You don't even need the <br /> since you can just display the second span as display:block;
Updated fiddle here: http://jsfiddle.net/H2Pzr/6/
use two span with different class see jsfiddle
<h1><span class="first">An</span> Example <br>
<span class="second">Alignment</span>
</h1>
Try this: (minimal elements!)
<h1>Example <br>Alignment</h1>
h1 {
font-size: 30px;
margin-left: 31px;
}
h1:before
{
content: 'An ';
font-size: 20px;
margin-left: -31px;
}
I have seen a question here about the same, but I can't get any of the answers to work (at least on Chrome).
This question is only for <br>, I know plenty of other techniques to change the height but in this case I can't change the HTML.
bla<BR><BR>bla<BR>bla<BR><BR>bla
CSS:
br {
display: block;
margin-bottom: 2px;
font-size:2px;
line-height: 2px;
}
Desired effect: smaller inter-line height.
The only thing I can get to work is display:none, but then all line break are removed.
Here's a fiddle for it using some of the techniques, but see that it renders the exact same as without any CSS.
This feels very hacky, but in chrome 41 on ubuntu I can make a <br> slightly stylable:
br {
content: "";
margin: 2em;
display: block;
font-size: 24%;
}
I control the spacing with the font size.
Update
I made some test cases to see how the response changes as browsers update.
*{outline: 1px solid hotpink;}
div {
display: inline-block;
width: 10rem;
margin-top: 0;
vertical-align: top;
}
h2 {
display: block;
height: 3rem;
margin-top:0;
}
.old br {
content: "";
margin: 2em;
display: block;
font-size: 24%;
outline: red;
}
.just-font br {
content: "";
display: block;
font-size: 200%;
}
.just-margin br {
content: "";
display: block;
margin: 2em;
}
.brbr br {
content: "";
display: block;
font-size: 100%;
height: 1em;
outline: red;
display: block;
}
<div class="raw">
<h2>Raw <code>br</code>rrrrs</h2>
bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
<div class="old">
<h2>margin & font size</h2>
bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
<div class="just-font">
<h2>only font size</h2>
bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
<div class="just-margin">
<h2>only margin</h2>
bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
<div class="brbr">
<h2><code>br</code>others vs only <code>br</code>s</h2>
bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
They all have their own version of strange behaviour. Other than the browser default, only the last one respects the difference between one and two brs.
You can't change the height of the br tag itself, as it's not an element that takes up space in the page. It's just an instruction to create a new line.
You can change the line height using the line-height style. That will change the distance between the text blocks that you have separated by empty lines, but natually also the distance between lines in a text block.
For completeness: Text blocks in HTML is usually done using the p tag around text blocks. That way you can control the line height inside the p tag, and also the spacing between the p tags.
Take a look at the line-height property. Trying to style the <br> tag is not the answer.
Example:
<p id="single-spaced">
This<br> text
<br> is
<br> single-spaced.
</p>
<p id="double-spaced" style="line-height: 200%;">
This<br> text
<br> is
<br> double-spaced.
</p>
The line height of the br tag can be different from the line height of the rest of the text inside a paragraph text by setting font-size for br tag.
Example: br { font-size: 200%; }
Use the content property and style that content. Content behavior is then adjusted using pseudo elements. Pseudo elements ::before and ::after both work in Mac Safari 10.0.3.
Here element br content is used as the element anchor for element br::after content. Element br is where br spacing can be styled. br::after is the place where br::after content can be displayed and styled. Looks pretty, but not a 2px <br>.
br { content: ""; display: block; margin: 1rem 0; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }
The br element line-height property is ignored. If negative values are applied to either or both selectors to give vertical 'lift' to br tags in display, then correct vertical spacing occurs, but display incrementally indents display content following each br tag. The indent is exactly equal to the amount that lift varies from actual typographic line-height. If you guess the right lift, there is no indent but a single pile-up line exactly equal to raw glyph height, jammed between previous and following lines.
Further, a trailing br tag will cause the following html display tag to inherit the br:after content styling. Also, pseudo elements cause <br> <br> to be interpreted as a single <br>. While pseudo-class br:active causes each <br> to be interpreted separately. Finally, using br:active ignores pseudo element br:after and all br:active styling. So, all that's required is this:
br:active { }
which is no help for creating a 2px high <br> display. And here the pseudo class :active is ignored!
br:active { content: ""; display: block; margin: 1.25em 0; }
br { content: ""; display: block; margin: 1rem; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }
This is a partial solution only. Pseudo class and pseudo element may provide solution, if tweaked. This may be part of CSS solution. (I only have Safari, try it in other browsers.)
Learn web development: pseudo classes and pseudo elements
Pay attention to global elements - BR at Mozilla.org
You can control the <br> height if you put it inside a height limited div. Try:
<div style="height:2px;"><br></div>
As the 'margin' doesn't work in Chrome, that's why I used 'border' instead.
br {
display: block;
content: "";
border-bottom: 10px solid transparent; // Works in Chrome/Safari
}
#-moz-document url-prefix() {
br {
margin-bottom: 10px; // As 'border-bottom' doesn't work in firefox and 'margin-bottom' doesn't work in Chrome/Safari.
}
}
The BR is anything but 'extra-special': it is still a valid XML tag that you can give attributes to. For example, you don't have to encase it with a span to change the line-height, rather you can apply the line height directly to the element.
You could do it with inline CSS:
This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br style="line-height:40vh"/>
break!
Notice how two line breaks were used instead of one. This is because of how CSS inline elements work. Unfourtunately, the most awesome css feature possible (the lh unit) is still not there yet with any browser compatibility as of 2019. Thus, I have to use JavaScript for the demo below.
addEventListener("load", function(document, getComputedStyle){"use strict";
var allShowLineHeights = document.getElementsByClassName("show-lh");
for (var i=0; i < allShowLineHeights.length; i=i+1|0) {
allShowLineHeights[i].textContent = getComputedStyle(
allShowLineHeights[i]
).lineHeight;
}
}.bind(null, document, getComputedStyle), {once: 1, passive: 1});
.show-lh {padding: 0 .25em}
.r {background: #f77}
.g {background: #7f5}
.b {background: #7cf}
This is a small line
<span class="show-lh r"></span><br /><span class="show-lh r"></span>
break. Whereas, this is a BIG line
<span class="show-lh g"></span><br /><span class="show-lh g"></span>
<span class="show-lh b"></span><br style="line-height:40vh"/><span class="show-lh b"></span>
break!
You can even use any CSS selectors you want like ID's and classes.
#biglinebreakid {
line-height: 450%;
// 9x the normal height of a line break!
}
.biglinebreakclass {
line-height: 1em;
// you could even use calc!
}
This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br id="biglinebreakid" />
break! You can use any CSS selectors you want for things like this line
<br />
<br class="biglinebreakclass" />
break!
You can find our more about line-height at the W3C docs.
Basically, BR tags are not some void in world of CSS styling: they still can be styled. However, I would recommend only using line-height to style BR tags. They were never intended to be anything more than a line-break, and as such they might not always work as expected when using them as something else. Observe how even after applying tons of visual effects, the line break is still invisible:
#paddedlinebreak {
display: block;
width: 6em;
height: 6em;
background: orange;
line-height: calc(6em + 100%);
outline: 1px solid red;
border: 1px solid green;
}
<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<br id="paddedlinebreak" />
break.
</div>
A work-around for things such as margins and paddings is to instead style a span with a br in it like so.
#paddedlinebreak {
background: orange;
line-height: calc(6em + 100%);
padding: 3em;
}
<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<span id="paddedlinebreak"><br /></span>
break.
</div>
Notice how the orange blob above is the span that contains the br.
#biglinebreakid {
line-height: 450%;
// 9x the normal height of a line break!
}
.biglinebreakclass {
line-height: 1em;
// you could even use calc!
}
This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br id="biglinebreakid" />
break! You can use any CSS selectors you want for things like this line
<br />
<br class="biglinebreakclass" />
break!
You can write br tag as show
<br style="content:''; padding: 10px 0;" />
Change padding value to 10px to anything you like.
Note: As padding is specified, height increases in both directions(top and bottom)
The line height of the <br> can be different from the line height of the rest of the text inside a <p>. You can control the line height of your <br> tags independently of the rest of the text by enclosing two of them in a <span> that is styled. Use the line-height css property, as others have suggested.
<p class="normalLineHeight">
Lots of text here which will display on several lines with normal line height if you put it in a narrow container...
<span class="customLineHeight"><br><br></span>
After a custom break, this text will again display on several lines with normal line height...
</p>
<font size="4"> <font color="#ffe680">something here</font><br>
I was trying all these methods but most didn't work properly for me, eventually I accidentally did this and it works great, it works on chrome and safari (the only things I tested on). Replace the colour code thing with your background colour code and the text will be invisible. you can also adjust the font size to make the line break bigger or smaller depending on your desire. It is really simple.