What I have is a div class="myBox" and "myTitle"
the CSS for .myBox:
{
font-size:14px
}
the CSS for .myTitle:
{
font-size:18px
}
Now in certain scenarios I want these both to scale up or down by a percentage. So I setup a style="font-size:150%" and I simply add that to my HTML
This successfully overrides the CSS class and applies a 150% font size to the classes.
The Problem
Both .myBox and .myTitle are now equally large, they aren't maintaining a relative difference in font size. It seems the 150% is in regards to a global font-size for the page so when I tell it to goto 150% they are the same.
What I was hoping was for:
.myBox would be 150% * 14px = 21px
.myTitle would be 150% * 18px = 27px
Is there a way I can set the font size to scale as a percentage up using only CSS and the style property?
This is a job for em. em is a relative unit that is based on the parent's font size. Search about it and you'll find plenty of resources, including it's partner in crime, the rem unit (:root em) https://www.w3.org/WAI/GL/css2em.htm
body {
line-height: 1;
}
.box {
font-size: 14px
}
.title {
font-size: 18px
}
.bigger {
font-size: 1.5em;
}
<div class="box">box (14px)
<div class="myBox bigger">mybox (21px)</div>
</div>
<div class="title">box (18px)
<div class="myTitle bigger">mybox (27px)</div>
</div>
My div tag seems to be having a margin towards the top between the div and the body tag
body {
margin: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: green;
border: 2px solid black;
}
div.container {
max-width: 920px;
height: 100%;
margin: 0px auto;
padding-left: 20px;
padding-right: 20px;
background-color: #e1e1e1;
display: block;
//border: 2px dotted black;
}
Here are my two css for body and div, if I include the border code in the div tag then the color is blue all the way till the top otherwise there is margin of green inbetween the div and the body tag.
How do I remove this margin without using a border ?
Browsers may have built-in styles which can make some difference in some cases. These built-in styles may include paddings, margins, other kinds of spacings, styles for tables, etc.
Here is a project which when included, normalizes every style which may be applied by the browser. https://necolas.github.io/normalize.css/
As far as I know, every CSS framework use this technique too.
If that doesn't solve your issue, try to use Chrome Dev Tools or other debugging tool to check the actual DOM. The tool can provide you information about actual paddings, margins, and dimensions. For Chrome, right click your page and choose inspect element or something similar. You'll have a similar option in most of the modern browsers.
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've been using rem sizing instead of px for all styling and have noticed if the user changes their browser font size to small, it will then remove the borders.
Here's a link as reference, just change your browser text settings from medium to small, the first div is with rem second is with px.
http://jsbin.com/pozex/1/edit
Actually you should not use rem for border size in my opinion (except for some rare cases maybe). Specially if you want to have a hair-line border then use 1px. There is nothing wrong with using pixels where they actually make sense.
We have used rem's with pixel fallback in large scale web projects but never used rem for the border sizes (but we have only used hair-line borders most of the cases). In my opinion units relative to font (rem, em, ch) should be used for content relevant elements such as font-sizes and negative space between content elements using padding / margin.
Sometimes even rem's are not the nicest solution. They are great because they are predictable in comparison to em's but you also loose a lot of dynamics. Recently we were following an idea by Chris Coyier to set a font-size in rem on component level (article, product teaser etc.) and then use em on sub-elements of the component. This gives you the flexibility to change the rem font-size on component level to scale the whole component content.
One workaround is to use box-shadow: http://jsfiddle.net/KsW2s/.
* {
padding: 0;
margin: 0;
}
html {
font-size: 10px;
}
body {
padding: 10px;
}
div:first-of-type {
background-color: white;
box-shadow: 0 0 0 0.1rem red;
margin-bottom: 2rem;
padding: 0 1.6rem;
}
div:last-of-type {
background-color: white;
border: 1px solid red;
padding: 0 16px;
}
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 */
}