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>
Related
I need to set margins between lines in one paragraph. How I can do this? I need to make something like this:
HTML:
<p>Any creative project is unique
and should be provided with
the appropriate quality</p>
I tried to put each line in <span> and set margin-bottom to it, but it not working.
Just wrap your whole text in a <span> tag and use line-height for margins and padding for spacing between text and background
Stack Snippet
p {
font: bold 30px Verdana;
}
span {
background: red;
line-height: 45px;
color: #fff;
padding: 3px;
}
<p><span>Any creative project is unique and should be provided with the appropriate quality</span></p>
If you want to use <span> with margin you need to set also display: inline-block; or display: block; to the <span>
p {
width: 200px;
}
p > span {
display: inline-block;
margin-bottom: 5px;
background-color: orange;
}
<p>
<span>Any creative project is unique</span>
<span>and should be provided with</span>
<span>the appropriate quality</span>
</p>
U can use <br> between each lines or just put a span with a height between each line, something like this:
<p>Any creative project is unique</p>
<span style="height: 10px;"></span><p>panand should be provided with</p>
Try using line-height property in your .css file referencing te element enclosing the text.
When the text is long the checkbox goes above the text. How can I make it stay on the same line as the text but break the text if its long? ie give the text white-space:normal but keep the checkbox and the first bit of the text on the same line.
<input style="float: left" type="checkbox" ...etc..> my text
I've amended the markup to use a label and input, but that's not necessary (you'll just need something to contain your checkbox. Take a look at this jsFiddle for an example.
HTML:
<div class="container">
<label><input type="checkbox"> My text - this label can be as long as you want it to be, see?</label>
</div>
CSS:
.container {
width: 150px;
background: red;
}
label {
display: block;
padding-left: 1em;
}
input {
display: inline-block;
margin-left: -1em;
}
The width on the .container is just there to show that this will work when the text wraps: it will work at any width and for responsive designs without anything fixed. It'll look like this:
And here's an example using your original markup (with an added span, I'm assuming you can include that):
<div class="container">
<span><input type="checkbox"> My text - this label can be as long as you want it to be, see?</span>
</div>
UPDATE: Something else that maybe useful for you:
http://jsfiddle.net/persianturtle/FrEsX/3/
Hide's the overflow.
Something like this?
http://jsfiddle.net/persianturtle/vwfwh/3/
If not, draw a picture.
.container {
width: 150px;
height: 200px
}
input {
margin: 25px 25px 50px 50px;
float: left;
}
well I would set fixed width for a.
a {
display: inline-block;
width: 100px; /*whatever number you need*/
}
You can try witch is for Non Breakable Space.
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.
I was wondering about the textarea box bit.ly has on the 1st page you log in where they state to "Shorten your links and share from here".
I was wondering how you would go about centering text in a textarea? I don't think there's a command, so how would you hardcode move it down a few spaces. You can't use html tags in the textarea so it's been difficult with or other methods
Are you sure it's a textarea and not just an <input type="text">? If it's the latter, you can achieve the effect quite easily with padding:
input[type=text] { font-size: 20px; padding: 5px; }
Edit: If it's a text area (say with one row), styling via padding works the same:
textarea { font-size: 20px; padding: 5px; }
Set textarea padding and margin 0 and set the line-height. Or it would be better to use padding like Kerrek posted
You can't center multi line text in a textarea but you can add padding.
<!doctype html>
<style>
input[type=text]{margin:0;padding:0;line-height:40px;font-size:40px;}
</style>
<input type=text>
I have been asked to vertically align the text in the labels for the fields in a form but I don't understand why they are not moving. I have tried putting in-line styles using vertical-align:top; and other attributes like bottom and middle but it doesn't work.
Any ideas?
<dd>
<label class="<?=$email_confirm_class;?>"
style="text-align:right; padding-right:3px">Confirm Email</label>
<input class="text" type="text"
style="border:none;" name="email_confirm"
id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>"
tabindex="4" />
*
</dd>
You can use flexbox in 2018+:
.label-class {
display: flex;
align-items: center;
}
Browser support: https://caniuse.com/#search=flexbox
Vertical alignment only works with inline or inline-block elements, and it's only relative to other inline[-block] elements. Because you float the label, it becomes a block element.
The simplest solution in your case is to set the label to display: inline-block and add vertical-align: middle to the labels and the inputs. (You might find that the height of the text is such that vertical align won't make any difference anyway.)
Have you tried line-height? It won't solve your problems if there are multiple row labels, but it can be a quick solution.
The vertical-align style is used in table cells, so that won't do anything for you here.
To align the labels to the input boxes, you can use line-height:
line-height: 25px;
I had a similar problem and solved it wrapping the label into a div and setting the following styles:
<div style="display: table; vertical-align: middle">
<label style="display: table-cell;" ... > ... </label>
</div>
This is what I usually do to "vertical align" text inside labels:
label {
display: block;
float: left;
padding-top: 2px; /*This needs to be modified to fit */
}
It won't scale very nicely, but it works.
I came across this trying to add labels o some vertical radio boxes. I had to do this:
<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br />
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br />
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />
This gets them to display properly, where the label is centered on the radio button, though I had to increment the top padding with each line, as you can see. The code isn't pretty, but the result is.
label {
padding: 10px 0;
position: relative;
}
Add some padding-top and padding-bottom instead of height.
Use css on your label.
For example:
label {line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px;}
Notice that the line-height will adjust the height of the line itself, whereas margin will dictate how far out other elements will be outside the lable and padding will dictate any inner space from the outside edge of the label. The margin and padding work like this (clockwise: Top Right Bottom Left), so 2px 5px 3px 5px is:
2px Top
5px Right
3px Bottom
5px Left
To do this you should alter the vertical-align property of the input.
<dd><label class="<?=$email_confirm_class;?>" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; border:none;" name="email_confirm" id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" tabindex="4" /> *</dd>
Here is a more complete version. It has been tested in IE 8 and it works.
see the difference by removing the vertical-align: middle from the input:
<html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>
Adding disply:flex property to the label will get the job done!
None of these worked for me. I am using ASP.Net MVC with Bootstrap.
I used the following successfully:
.label-middle {
padding-top:6px;
}
<label id="lblX" class="label-middle" ></label>
This vertically aligned the label with the textbox next to it.
If your label is in table, padding may cause it to expand. To avoid this you may use margin:
div label {
display: block;
text-align: left;
margin-bottom: -0.2%;
}
You don't have to add any padding or edit the line-height!
Instead, just make sure that when you have an HTML like this :
<label><input type="checkbox" name=""><span>Checkbox Text</span></label>
Just make sure that the input height and width are the same, and the the text has the same font size.
Then, it will look perfectly fine and looks centered.
You have this:
<label class="styling_target">Label Text</label>
<input />
Do this instead:
<label>
<span class="styling_target">Label Text</span>
<input />
</label>
Styling a label doesn't really work, but you can have arbitrary HTML inside it, and you can style that.
Force relative positions to provide top/bottom adjustments
.whatever {
position: relative;
}
.whatever .input {
position: relative;
}
.whatever span {
position: relative;
top: -2px; /* adjust this up or down */
}
<label class="whatever">
<input type="checkbox"><span>my thing</span>
</label>
Just set the vertical-align property of the label to top.
label {
vertical-align: top;
}
<label for="desc">Description</label>
<textarea name="desc" id="desc" cols="30" rows="10"></textarea>
Lacking in elegance, pure html, no CSS solution:
<table>
<tr>
<td>
<label></label>
</td>
</tr>
<tr>
<td>
<input></input>
</td>
</tr>
</table>