I have this code:
<h1>Windows Store<br /><span class="smallSubText">apps</span></h1>
and:
#windowsStoreApplications {
float: right;
width: 50%;
font-size: 16pt;
text-align: center;
height: 182px;
background-color: #9DCA87;
border-top: 6px solid #AEDF66;
}
.smallSubText {
font-size: 16pt;
}
As you can see, both the h1 and span are set to the same font-size - this is not how I want it but it's how I made it because I noticed that the font-sizes were not matching up to how they should be.
I made them both the same size to demonstrate that they are both the same size in code, but when you run the site and look at it - they're actually different sizes.
Is this due to some size weirdness with the h1 element?
If #windowsStoreApplications is a div, then you need to delclare a #windowsStoreApplications h1{} markup in your css and style the element with font-size:16px; there. You are not selecting the h1 element otherwise.
Well first, if you havn't declared a font-size for your h1's (and the rest) the browser defaults will be implemented which vary in size.
Second, you should not be using pt for your size, you should be using px, em or %.
#windowsStoreApplications h1 {
font-size:16pt; /* or preffered unit */
}
Related
I added Bootstrap to my project, but it seems like the headings sizes are fixed and can't be changed. I'm trying to change the font size of my project, as my h1 and h2 text looks really big on mobile devices. For some reason, when I change the font-size of h1 and h2 tags, it seems to be ignored, and when I inspect it, they have lines through the code that adjust the font-size. I tried adding media queries too, but it is not working.
Code:
h1{
font-size: 15px;
padding-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #E85A4F;
}
h2{
font-size: 17.5px;
}
p{
font-size: 15px;
}
#media only screen and (min-width: 576px){
h1 {
font-size: 20px;
padding-top: 25px;
}
}
The odd thing is when I adjust the paragraph font-size, it works fine. Is there a way I can adjust the heading font size in the same way?
The lines through the code mean, that the style is overwritten.
This image shows the font size of the h1 of the code below. As you can see, there are multiple styles for h1. The one that is displayed at the top in the style panel (image above) gets applied. (This is the selector with the highest specifity, if there are multiple ones with the same specifity the last of the last stylesheet gets applied). On the right side you can see the file and the line where the style is applied.
To solve your problem you can:
Remove the code in the file and the line that is overwriting your headline style
Use a selector with a higher specificity, in this case for example h1.headline.
Add important to your style (font-size: 30px!important;), Note that this is the easiest but dirtiest solution
h1{
font-size: 30px;
}
#media only screen and (min-width: 800px){
h1{
font-size: 20px;
}
}
/*
a lot more css
*/
h1{
font-size: 35px;
}
<div>
<h1 class="headline">Test</h1>
</div>
Please read the question carefully. It's not the same as the one about How to remove the space between inline-block elements.
Consider the following HTML:
body {
/* font-family: Arial; */
}
.my-class {
display: inline-block;
margin: 0 0 0 -4px;
background-color: transparent;
border: 1px solid #ccc;
padding: 20px;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
Which produces:
But, if I add:
body {
font-family: Arial;
}
it results in a 1px space between the second and third buttons:
The question is: Why adding font-family to the body affects the space between the buttons?
It happens because each font has different width, even for the space character. You already know about the whitespace issues with inline-blocks. So, when you set Arial, those whitespaces change their width slightly from the browser's default font (or any other font with different width), which is Times New Roman in my case.
See how drastic the change is when you set the monospace font.
Now, why it happens between the 2nd and the 3rd box and not the 1st and the 2nd one? I'm pretty sure it comes down to rounding pixel values based on the width of the words entered, seems like there is a pseudo sub-pixel rendering present in the background, yet the decimal values get rounded in the final render process. See what happens if you use Arial and print Hell Stack Overflow instead of Hello Stack Overflow - the gaps look the same. So, it's just an undesired coincidence.
Another point that proves this is a rounding issue is the change in the gaps across various page zoom levels. It's fairly common to get these pixel mismatches in the layout when dealing with decimals in HTML. Zooming adds another dividing/multiplication stage, which changes the core values even further, resulting in completely unpredictable behaviour in the final layout.
It's because you're displaying the buttons as inline-block elements and when you have inline elements whitespace is significant and is rendered in the same way that spaces between words is rendered.
i.e inline-block makes whitespace significant, so spaces in the source between inline-block elements will be rendered.
For example: You could center the inline-block elements just by adding text-align: center; the same way is used to center the text in its parent block element. - DEMO
Why adding font-family to the body affects the space between the buttons?
Different fonts can have different spacing between words, If you compare font-family: monospace; with font-family: sans-serif; then you will see the monospace fonts have more space between words than sans-serif fonts and the inline-block elements is also rendered in the same way and have the spacing between elements.
Monospace DEMO
Sans-serif DEMO
The best way to remove the space between inline-block elements is adding the font-size: 0; to the parent element.
DEMO
div {
font-size: 0;
}
.my-class {
display: inline-block;
border: 1px solid #cccccc;
padding: 20px;
font-size: 16px;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
The answer assumes that DirectWrite is enabled. You will not notice the specified symptoms and fractional widths otherwise. It is also assumed that default serif and sans-serif fonts are Times New Roman and Arial.
Whoever said that the space character is 4px wide is mistaken:
$(function() {
$(".demo").each(function() {
var width = $("span", this).width();
$("ins", this).text("total width: " + width + "px, " + (width / 10) + "px per space)");
});
});
.demo {
white-space: pre;
overflow: hidden;
background: #EEE;
}
.demo-1 {
font: 16px/1 sans-serif;
}
.demo-2 {
font: 16px/1 serif;
}
.demo-3 {
font: 16px/1 monospace;
}
.demo span {
float: left;
background: #CF0;
}
.demo ins {
float: right;
font-size: smaller;
}
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<p>The green blocks contain 10 spaces:</p>
<p class="demo demo-1"><span> </span><ins></ins></p>
<p class="demo demo-2"><span> </span><ins></ins></p>
<p class="demo demo-3"><span> </span><ins></ins></p>
Note that:
For a given size the character width depends on font family.
The character width does not necessarily have to be a whole number. Serif font gives you a nice whole number (4px), but Sans-serif font gives you fractional number (4.4px).
You could get different results in different browsers depending on how they handle fractional gaps between two blocks (e.g. 4.4px for 16px Arial). CSS specs are silent about this.
In Chrome with DirectWrite enabled, spaces are rendered as 4px and 5px alternately due to rounding off. This explains why there is no gap between first and second button and 1px gap between second and third. Try adding more buttons in your original example and notice how the pattern repeats (Demo).
Using margin-left: -4.4px seems to work but it is not guaranteed to work. Consider going back to the alternate solutions.
PROBLEM:
this happens because the display is set to inline-block.
inline-block is:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
»» see more about display property here: DISPLAY INFO
SOLUTION(S):
Remove the spaces
Negative margin
Skip the closing tag
Set the font size to zero
Just float them instead
Just use flexbox instead
For more details on each solution check
Fighting the Space Between Inline Block Elements
my preferred solutions from above is
Set the font size to zero
therefore is a snippet with your code and my preferred solution:
div {
font-size:0;
}
.my-class {
display: inline-block;
border: 1px solid #cccccc;
padding: 20px;
font:normal 12px Arial;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
Plus, here is a snippet with your EXACT CODE only changing the font-family from body to the elements that have display:inline-block, and achieving the same output as my FIRST SNIPPET
.my-class {
display: inline-block;
margin-left: -4px; /* Remove the space between inline elements */
border: 1px solid #cccccc;
padding: 20px;
font-family:Arial;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
EDIT:
OP's question:
Why adding font-family to the body affects the space between the
buttons?
in web typography there are:
Sans-serif
Fonts that do not have decorative markings, or serifs, on their letters. These fonts are often considered easier to read on screens.
Serif
Fonts that have decorative markings, or serifs, present on their characters.
Monospace
Fonts in which all characters are equally wide.
Cursive
Fonts that resemble cursive writing. These fonts may have a decorative appearance, but they can be difficult to read at small sizes, so they are generally used sparingly.
Fantasy
Fonts that may contain symbols or other decorative properties, but still represent the specified character.
Since Arial is a sans-serif font, therefore a non-fixed width font ( like monospace ), when applied to body with child elements displaying inline-block(without fix for the gaps) it will create space between the child elements.
Although if you apply the font-family to the child elements, like I DID in my 2ND SNIPPET it doesn't happen anymore.
one comment of an article:
The gap between inline elements is, as you suggest, a space character.
The width depends on the font (family, variant, etc.) and approximates
to .25em
you can check it here
the full article is below
ARTICLE
DEMO
The problem is that there are hidden spaces (a line break and a few tabs counts as a space, just to be clear) between tags. Minimize the HTML or comment the spaces out and everything will work correct:
body {
font-family: Arial;
}
.my-class {
display: inline-block;
margin-left: -4px;
border: 1px solid #cccccc;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<button class="my-class">Hello</button><!--
--><button class="my-class">Stack</button><!--
--><button class="my-class">Overflow</button>
</div>
</body>
</html>
Check the demo and use this CSS. If you have not satisfied, just change the font size. It will get fixed.
body {
font-family: Arial;
font-size: 15px;
}
.my-class {
display: inline-block;
margin: 0 0 0 -4px;
background-color: ccc;
border: 1px solid #ccc;
padding: 20px;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
See also JSfiddle.
I recommend to use
float:left
or
float:right
instead
display:inline-block;
use the below css for this:
.my-class {
display: inline-block;
margin-left: -4px;
border: 1px solid #cccccc;
padding: 20px;
margin-right:-1px;
}
I wanted to know If I can use both px and em in the same CSS file (for same tags/class). What I mean by this is that, can I have something like this : -
body{
font-size: 10px;
font-size: 0.625em;
font-weight: normal;
font-family: arial;
margin: 0px auto;
color: #333333;
background: #E0E0E0;
}
My objective is to convert a very big CSS file that supports 'em' so that the user can decide the font size they would like to use. But my problem is the well documented issue with 'em' - the nested tags get affected.
I sought for help by using 'rem' in certain places instead of 'em'. Though it helped a bit, I lost the entire structure of the webpage.
I would like to keep the exact same font size in my webpage and still support the user wanting to change font size.
I am using jQuery to add a class to the body tag that would contain a specified font size and everything else should be scalable.
To address your sample css...
You can mix px and em (and percentage) to your heart's content. This is fine:
body{
font-size: 10px;
margin: 0px auto;
}
You cannot define the same css property twice. Well, technically you can, but only one of them will be applied. So this is broken:
body{
font-size: 10px;
font-size: 0.625em;
}
But it has nothing to do with mixing px and em. This is also broken:
body{
font-size: 10px;
font-size: 20px;
}
The good news is you're on the right track...
Define some top level container, or the body, with font-size in pixels.
Define every sub node with font-size in em.
Use javascript to change the top level container's font-size.
Here's an example fiddle: http://jsfiddle.net/pabo/pn1tyaxb/
Notice that the buttons, and indeed anything outside of the top level container you've chosen, will not be affected by rescaling.
I know this is not really the question, but I came here looking for another answer, so I will post it anyway. (About your question, obviously it makes no sense to define the same property twice with different units, but check the other answers for that.)
But yes you can use em and px in the same style sheet, and you can use em and px even in the same property!
body {
font-size: 12px;
}
.footnote {
font-size: 0.7em;
}
input {
padding: 0.5em;
border: 1px solid #666;
}
.input-replace {
padding: calc(0.5em - 3px);
border: 4px solid #eee;
}
When you use calc() you can make sure the size of the two elements is always exactly the same.
Use em units for any text (or other elements) that you want to scale based off the user's selection. And use rem units for things you want to stay the same size.
DEMO EXAMPLE
CSS: The REM units will be based off this value (base 10 for easy calc)
html { font-size:10px; }
HTML: User can select what size they want the page font to be
<select id="sizeSelector">
<option value="10px">Extra Small</option>
<option value="12px">Small</option>
<option value="14px">Normal</option>
<option value="16px">Large</option>
<option value="18px">Extra Large</option>
</select>
JS: Create a jQuery function bound to the select box that modifies the <body>font-size, thus changing your em based declarations:
$(document).ready(function() {
$("#sizeSelector").change(function(e) {
$("body").css('fontSize', e.target.value);
});
// initialize font size for first page load
$("#sizeSelector").prop("selectedIndex", 2).trigger('change');
});
Updated: Code is no longer dependent on classes
You cant define in the same css.But you can define like this.
.input {
width:100px;
}
<input width:0.1em;>
I want to create a form for my front page that has very big elements, so I'm thinking I just define some custom css classes, but I'm struggling with how exactly I'm meant to scale everything up, eg padding, line height, etc. to match font size.
I'm thinking of having a horizontal form with labels and textboxs and submit button having a text size of 72px.
Is there anywhere I can get more information on how to scale everything accordingly or can anyone give me some tips?
What I was trying is:
input.real-large-input {
font-size: 24px;
padding: 14px 24px;
width:270px;
line-height:46px;
}
label.real-large-label {
font-size: 24px;
line-height:46px;
font-weight:bold;
}
.real-large-btn {
font-size: 24px;
padding: 14px 24px;
}
But the line-height and padding are really just kind of made up, I don't know what values to use to keep it all to scale with the original. Actually quite confused by the original bootstrap CSS as it has something like 14px font-size, padding of 4px for top and bottom, but a line-height of 20px, doesn't add up.
The above works sort of fine at these values, but the issue is I want to scale much larger than this but it all gets really messy as I don't know what values I should be putting for padding and line-height when font-size is 72px.
Bootstrap's inputs have a fixed height, I suggest you set the property to auto to let them scale properly with the font-size you set. Here's a simple demo with a custom class form-large:
http://jsfiddle.net/fpC4r/3/show/
.form-large{
font-size: 60px;
}
.form-large .control-label{
padding-top: 20px;
padding-bottom: 20px;
line-height: normal;
}
.form-large input, .form-large button{
font-size: 60px;
padding: 20px;
height: auto;
line-height: normal;
}
I am currently designing a web page with em units. I guess I don't understand it as well as I thought I did because a problem has occurred while I tried to align two separate span tags with margin-left. They were placed in the upper-left corner of my header. They were positioned on top of one another using display:block. When I used margin-right to align both the span tags, the larger span and the smaller tag didn't align correctly. I used the same number for margin-right, but they were still messed up.
Is this because I'm using em's?
How can I fix this?
I will paste the code I'm using below so you'll get a sense of what I'm working with. Hopefully I've explained this well enough.
HTML
<div class="header1">
<span class="title">Title goes here</span>
<span class="subtitle">This is the subtitle</span>
</div>
CSS
body {
color: #333;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 62.5%; /* 10px */
line-height: 1.28;
}
.main1 {
width: 96em;
/* horizontally center the website layout */
margin: 0 auto; margin-top: .8em;
text-Align: left; /* override body {text-align:center} */
}
div.header1 {
clear: both;
width: 100%;
height: 9em;
background: #ff0000;
color: #fff;
}
.title {
font: small-caps 700 3.7em "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
}
.subtitle {
font-weight: lighter;
font-size: 1.4em;
}
The description of the problem is very confusing and does not explain what you want to achieve and what is your best attempt at that. You refer to left and right margin, but neither of them is set in your code for the elements discussed. You refer to setting display: block, but there is no such setting.
I will assume that you want the main title to appear (in the xy plane) above the subtitle. For this you need to set display: block or, better, use div markup instead of span or, best, use adequate heading markup such as h1 and h2 with due consideration of their default effects on vertical margins and font weight (i.e., overriding them in CSS if needed). And I assume that you wanted them left-aligned the same amount.
It seems that you did not take into account the relativity of the em unit. By definition, it equals the font size of the element (except in font-size, where it equals the font size of the parent element).
I suspect that you tried setting the left margin of both span elements using the same value such as 1em. But it does not mean the same for both elements, since their em sizes differ. If you wanted to set the their left margins to, say, the font size of the first element, you would set
.title { margin-left: 1em; }
.subtitle { margin-left: 2.6429em; }
The number 2.6429 is the ratio of the font sizes, calculated from 3.7/1.4.
It would be easier to just set a left margin on the enclosing div element. Its font size equals the font size of the body element, so if you wanted to set it to the font size of the main heading, you would use
div.header1 { margin-left: 3.7em; }
check the bellow link I hope this will help for you
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
px: pixels (a dot on the computer screen)
em: 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.
see the reference
So, you can use px instead em, its good practice.
Hope it will helps you. Thanks. !!