I would like to know why the span and input have different padding even if I set it the same. It behaves the same in Firefox and Chrome. Which CSS rule affects this?
span, input {
font-family: sans-serif;
font-size: 11pt;
font-weight: 400;
line-height: 16pt;
padding: 15px;
border: 1px solid black;
}
<span>Some text</span>
<input type="text">
line-height doesn't affect span because, by default, it is "inline" and input is inline-block. So if you set for span display: inline-block it should work
span, input {
font-family: sans-serif;
font-size: 11pt;
font-weight: 400;
line-height: 16pt;
padding: 15px;
border: 1px solid black;
display: inline-block; /* << here */
}
<span>Some text</span>
<input type="text">
Related
QUESTION 1:
Why do the following textarea and text input have different vertical text alignment if they both have the same font-size, line-height, height, padding ?
QUESTION 1.1
How can I make the textarea have the same vertical alignment as the input ?
.myTextarea {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 2px 5px;
resize: none;
}
.myInput {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 2px 5px;
}
.myDiv {
margin-top: 20px;
margin-bottom: 5px;
font-weight: bold;
}
<div>
<div class="myDiv">Textarea</div>
<textarea class="myTextarea" rows="1">12345</textarea>
<div class="myDiv">Input</div>
<input class="myInput" type="text" value="12345"/>
</div>
Textareas are for multiline texts while inputs are made for single line.
That's why line height won't have effect on input as it's considered to be equal to the input's height.
You can remove line height on your input since it has no effect on it.
Beside you should have the same line height as height for your textarea to reproduce the same effect than the input.
.myTextarea {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 32px;
height: 32px;
padding: 2px 5px;
resize: none;
}
.myInput {
display: block;
font-family: Arial;
font-size: 14px;
height: 32px;
padding: 2px 5px;
}
.myDiv {
margin-top: 20px;
margin-bottom: 5px;
font-weight: bold;
}
<div>
<div class="myDiv">Textarea</div>
<textarea class="myTextarea" rows="1">12345</textarea>
<div class="myDiv">Input</div>
<input class="myInput" type="text" value="12345"/>
</div>
I have an input and h4 element. I'm using the same font and font size but they do not look the same.
#font-face {
font-family: sansReg;
src: url(../fonts/openSansReg.ttf);
}
.global-message h4 {
/*for the chat messages*/
margin: 0;
font-size: 15px;
font-family: sansReg;
}
.input {
/*for the chat message input*/
padding-left: 10px;
box-sizing: border-box;
font-size: 15px;
font-family: sansReg;
border: 0;
border-radius: 2px;
background-color: white;
margin: 0 auto;
outline: 0;
background-repeat: no-repeat;
background-position: 2px 3px;
display: block;
}
<div id="chat-box">
<div id="chat-list-container">
<ul id="chat-messages">
<li class="global-message">
<h4>Will: Anyone wanna play?</h4>
</li>
<li class="global-message">
<h4>George: Hey guys!</h4>
</li>
<li class="global-message">
<h4>Jessica: How do i start a game?</h4>
</li>
</ul>
</div>
<input id="chat-message" class="input" type="text" placeholder="Message" maxlength="32" />
</div>
So as you can see I have some h4's to fill the chat and my input below it and I have used the same font but it looks like this:
The h4 element has font-weight bold by default; therefore, if you want to make the input look the same way, you have to add font-weight: bold; to your input style.
Or, if you want to make h4 look like the input, you can remove the bold by setting it to normal font-weight: normal; on the h4 element.
Examples:
*{
font-family: Helvetica, Arial;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
<h4>default bold</h4>
<h4 class="normal">light</h4>
<input value="default light"><br>
<input value="bold" class="bold"><br>
Headings have different default values. In your case you compare an h4 with a paragraph. As you can see below there is a big difference. What you need is to add font-weight: bold; to your .input-class.
H4 default values
h4 {
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Paragraph default values
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
A "good" practice (or what I try to remember to do) is to copy all default values in for each CSS-element I create. By doing so I have access to all properties and not only those I want to change.
Add css properties font-weight: bold; font-size: 1em to the input field. The font will look identical to the h4 font.
Try adding this to your css:
.global-message h4{
font-weight: normal;
}
It should make all the font look the same.
I want to keep dollar symbol at beginning of text box. I am able to achieve this using the below code.
It works find in chrome and IE. The dollar symbol goes and sits next to label in firefox. How do i fix this problem? And for aligning the dollar symbol inline with text i use top 2px. Is there a way to better the css code.
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
left: 10px;
position: absolute;
top: 2px;
}
.input-symbol-dollar {
position: relative;
}
.abc-input {
border: 2px solid #c9c9c9;
box-shadow: none;
color: #6b6f72;
font-size: 0.9375rem;
text-transform: none;
width: 100%;
color: #37424a !important;
font-family: "Roboto Regular", sans-serif;
font-size: 16px !important;
font-weight: 400;
height: 42px !important;
padding-left: 17px !important;
display: inline-block !important;
}
label {
color: #37424a;
display: inline-block;
font-family: "Roboto Bold", sans-serif;
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
<label for="abcInput" class="abc-label">lable filed </label>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.00"></span>
https://jsfiddle.net/8jdek3zt/5/
It looks like there's a lot of unnecessary code in your example.
Here's a simplified version that works on Chrome, Firefox and IE (not tested in Safari).
span {
display: inline-block;
position: relative;
}
input {
border: 2px solid #c9c9c9;
box-shadow: none;
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
height: 42px;
padding-left: 20px;
}
span::before {
content: "$";
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
<span>
<input placeholder="0.00">
</span>
Here's an explanation of the vertical centering method for the pseudo-element:
Element will not stay centered, especially when re-sizing screen
The reason why this is happening is because the span is an inline element, so it's positioning isn't calculated as you are expecting it to be. The easiest solution would be to set display: block on the <span class="input-symbol-dollar">
As for positioning it in a cleaner way, you could consider making the symbol display block as well, with a height 100% of the input and set the line-height equal to the input height. I've updated your fiddle but the relevant code is below:
https://jsfiddle.net/chzk1qgm/1/
.input-symbol-dollar {
position: relative;
display: block;
}
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
position: absolute;
display: block;
height: 100%;
top: 0;
left: 10px;
line-height: 46px; // height of input + 4px for input border
}
Alternatively, you could just change the span to a div, as a div is a block level element by default. The rest of the styles would remain the same though.
try putting span in div.
<label for="abcInput" class="abc-label">lable filed </label>
<div>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.000">
</span>
</div>
.custom-text{
border: 2px solid #DDD;
width: 100%;
padding: 5px;
}
<div class="custom-text">
<span>$</span>
<input style="border: none;"/>
</div>
I have the simple form and attached the css file for that. As you can see there are 2 fields and one checkbox - I would like to make the checkbox directly under the textarea, with around 1-2px space, not as it is now - how can I modify that? I thought the problem is somewhere here:
.textox, .textoxarea {
width: 340px;
border: solid 1px #999999;
padding: 2px;
border-radius: 4px;
font-size: 14px;
box-shadow: 0px 1px 2px 0px #9C9C9C;
background-color: #FFFFFF;
outline: none;
color: #474747;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 100;
}
but I can't find the proper way of doing that.
Here's my fiddle.
Thanks!
Remove the empty paragraphs between textarea and checkbox.
In your fiddle it's on lines 11 and 13.
http://jsfiddle.net/7hq0x6u4/3/
.center p:nth-of-type(2),.center p:nth-of-type(3){
margin:0;
}
This will reduce the space of margin in both the P tags which are covering the input elements
DEMO
Normally use of p tags to align input tags are not recommended.
Hi to your <input type="checkbox"> add these styles.
.foo {
bottom: 1px;
margin-left: 0;
margin-right: 5px;
position: relative;
}
.foo as an example class on checkbox.
I am trying to recreate a logo with plain text and CSS no images, the issue I have I can't seem to get padding to 0 around the text so that top and bottom text are only 2-5px apart.
Also is it possible to have them one on top of the other but not the have BIG TITLE CSS to
display:block
instead only to wrap around the text.
jSFiddle: http://jsfiddle.net/theStudent/ag60a6hs/
CSS:
/* FONT IMPORT */
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
.logo_large_txt{
color: #2faed9;
margin:0 0 0 0;
padding: 0 0 0 0;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 36px;
background-color: #000;
white-space: nowrap;
display: block;
}
.logo_small_txt{
color: #c2c2c2;
padding: 0;
margin: 0;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 16px;
background-color: #000;
white-space: nowrap;
}
HTML:
<div>
<span class="logo_large_txt">BIG TITLE</span>
<span class="logo_small_txt">SMALL CAPS</span>
</div>
Thanks
This isn't a padding issue, it's a line-height issue. Set line-height: 1em; on the relevant elements (those with text in them) and see how the height of the element now equals the size of the text.
Perhaps adding line-height might help, for example line-height:50% for logo_large_txt.
Yes this is line-height issue. You could set line-height to 1 or less on div and see the result.
For second part You should add <br /> tag between <span> tags.
fiddle or preview:
/* FONT IMPORT */
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
.logo_large_txt{
color: #2faed9;
margin:0 0 0 0;
padding: 0 0 0 0;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 36px;
white-space: nowrap;
}
.logo_small_txt{
color: #c2c2c2;
padding: 0;
margin: 0;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 16px;
white-space: nowrap;
}
div.logo {
line-height: 0.8;
display: inline-block;
background-color: #000;
}
<div class="logo">
<span class="logo_large_txt">BIG TITLE</span><br />
<span class="logo_small_txt">SMALL CAPS</span>
</div>