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;
}
Related
In the Safari desktop browser, Option–Command–Plus sign (+) and Option–Command–Minus sign (-) will change the text-only zoom level. This is an accessibility feature and it's different from the regular zoom feature.
My site looks ok at the default text-only zoom level, but I am not sure how to adjust my CSS when users are zoomed in or out. Any idea how to detect this feature in Safari?
Btw, this feature is also available in Chrome.
If I am correct, it sounds like you are trying to adjust the size of the text when the user zooms in or not, correct? If so, are you using REM unit sizing for tags? REM units adjust the sizing of an element based on the zoom of the browser. 1rem = 16px at a zoom level of 100%. If the user zooms to 150%, 1rem would equal 24px. Likewise, you can set an element to 2rem and it will take the 16px multiplied by 2 at 100% zoom. You can also use EM units which take the parent REM multiplied by a value. 1rem = 16px on the parent. .75em on the child means the parent is 16px, but the child is 12px. An example of this is below:
.one-rem {
font-size: 1rem;
border: 1px solid black;
}
.two-rem {
font-size: 2rem;
border: 1px solid black;
}
.container {
font-size: 1.5rem;
border: 1px solid black;
}
.one-em {
font-size: 1em;
}
.two-em {
font-size: 2em;
}
<p class="one-rem">This is a paragraph tag at 1rem</p>
<p class="two-rem">This is a paragraph tag at 2rem</p>
<br><br>
<div class=container>
This is the container for the em p tags. Container is set to 1.5rem.
<p class="one-em">This is 1em </p>
<p class="two-em">This is 2em </p>
</div>
This method can be used for other elements too, such as img tags.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I am designing some CSS for my site. I need to format (add some proper spacing between headers and paragraphs) a section of uniform text with headers and paragraphs on a single background. This can be done using either margin or padding property. I do understand the difference between these two in CSS. Also, there are a plenty of questions on SO regarding usage of these CSS properties:
Difference between margin and padding?
When to use margin vs padding in CSS
Margin or padding what is recommended?
However, no question shades the light on what property should be used for proper text formatting. Let's say I need to format the text like this:
Should I use margin or padding to control spacing between text elements (header and paragraphs)? What is recommended to use on <p> and <h..> tags? What is the common practice?
Here is what I came up with for now:
/* tiny reset */
html { font-size: 10px; }
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
p {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 2.5rem;
margin: 0.6rem 0 2.0rem 0;
padding: 0 2px 4px 2px;
width: 100%; /* Opera needs this */
text-rendering: optimizeLegibility;
}
h1, h2 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
text-align: center;
text-transform: uppercase;
padding: 0 2px 4px 2px;
text-rendering: optimizeLegibility;
}
h1 {
font-size: 4.0rem;
line-height: 4.0rem;
margin: 2.6rem 0 2.0rem 0;
}
h2 {
font-size: 3.2rem;
line-height: 3.2rem;
margin: 2.4rem 0 2.0rem 0;
}
.wrap {
margin: 20px;
padding: 20px;
-webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3);
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3);
}
<div class="wrap">
<p>The last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered good style to do it as it prevents forgetting to add it when extending the block with another declaration.</p>
<h2><strong>CSS statements</strong></h2>
<p>If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.</p>
<p>CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by a selector which is a condition selecting some elements of the page. The pair selector-declarations block is called a ruleset, or often simply a rule.</p>
</div> <!-- /wrap -->
line-height is used to control the spacing between lines of a paragraph. Margin is used between elements containing only text, generally. This isn't much different than standard typography used in print.
So you set the line height for a heading and then control how much space you want underneath it with margin. Just as you would for any other component. The space between paragraphs is margin. However, the space between individual lines of a paragraph are controlled with line height.
All of this can also be used to set a vertical rhythm on a page. You should Google for that.
One good reference for this is The Elements of Typographic Style Applied to the Web
I don't think it's a black and white matter. Though I am a big fan of paddings. You should really use what you feel is best.
For me padding is for spacing what's inside and margin for spacing what's outside. Sometimes padding can cause problems with the box-model dimensions, other times it can conflict with a background-image. Margins in the other hand can break layouts and can collapse.
So you really need to understand how each property affects the box-model and flow and use whichever you are comfortable with. Also worth noting that margin accepts negative values while padding does not.
If you wanted to add space that does not affect the layout flow, you could resort to positioning.
I narrowed the situation: I need to format a section of uniform text with headers and paragraphs on a single background.
For the space between the border of the container element and the text content, you’d probably want to use a padding on that container element. Of course you could use margins on the inner paragraph and headline elements as well – but that would be two different types of elements you’d have to format that way. So, setting a padding once on one element, or margins one multiple elements – which seems more efficient, and probably easier to maintain?
As for the spacing between the paragraphs and headlines themselves – here you might want to use margins, because margins can collapse.
Let’s say you had
h2 { margin-top: 15px; margin-bottom: 30px; }
p { margin-top: 10px; margin-bottom: 10px; }
(The h2 has a bigger font-size, so often it is desirable from a typographic perspective, that it should keep more distance to the preceding/following content as well, as say two paragraph elements directly following each other.)
Now with a headline followed by a paragraph in your HTML, with collapsing margins, that 30px bottom margin of the headline and the 10px top margin of the paragraph still result in 30px overall distance between those elements – whereas paddings with the same values would simple add up, and you’d get 40px distance between those two elements.
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 can't figure out why the select element has a larger height than input[type="text"].
I thought that line-height controlled the height of inline elements like select and input, but it appears to work slightly different for the select element.
Example: http://jsfiddle.net/Dismissile/mnBsV/
I am setting the following style:
input[type="text"], select {
padding: 2px;
border: 1px solid #ccc;
margin: 0;
line-height: 16px;
font-size: 14px;
}
I would think that the elements would behave as such:
16px + 4px + 2px (line-height + padding + border) = 22px
This is what it does for the input, but the select is doing:
18px + 4px + 2px
Where is it getting the 18px from? Why aren't they consistent? Tested this in both IE8 and Chrome 15.
I couldn't find any explicit references to how high the form elements should be but in http://www.w3.org/TR/css3-ui/#appendix D they do mention the default height of a select is
select[size] {
appearance: list-menu;
display: inline-block;
height: attr(size,em);
}
It gets its height form the font size, whereas every other input has the same style attributes. So it is valid to have a select be a different height from all the other elements. However there is no standard that I could find to define them anyway (Note how the link says it is informative not normative).
So they are different sizes because nobody said they should be the same size.
I was able to get your code to work.
The trick is to:
Set the display to block so that the height property is used.
Set the box-sizing property to content-box. Doing so will set the content area of the SELECT to the height, but keep in mind that margin, border and padding values will not be calculated in the width/height of the SELECT, so adjust those values accordingly.
Example
select {
display: block;
padding: 6px 4px;
-moz-box-sizing: content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
height: 15px;
}
Please see your updated jsFiddle.
The select components has an implicit button with outset border, the solution is use height and box-sizing: border-box.
I came across a version of the same problem. In my context, it was enough to hard code some padding into the select element:
.select-element { padding-bottom: 6px; }
Note: The following also had the same effect but caused additional problems:
.select-element { height: calc(100% - 18px); }
With that second alternative, once a form error came in and a new ul element was inserted after the select element (all of which is inside a flex container), the height was no longer correct. That issue does not arise using the first option.
Hope this helps someone...
After reading the thread
Input size vs width
I'm clear that we should not use size attribute but css style.
What will be the cross browser css that shows exactly same width for both input[text] and textarea?
BTB, I tried
#idInputText, #idTextArea {
font: inherit;
width: 60ex;
}
Is it correct? any better solution?
Thanks in advance for any help.
You will probably get more consistent results with different browsers by applying a CSS reset first. This article lists some good examples:
https://stackoverflow.com/questions/116754/best-css-reset
Once you have eliminated the subtle browser differences on padding and margins, then your master width of 60ex should allow the inputs to line up.
The native padding for text input elements differ. You will need to assign a different width to input elements and textarea elements and experiment.
#form input.textfield { width:10em; }
#form textarea { width:9em; }
Just throw some default styles ( I prefer ems ) and pop open Firebug and experiment by changing the size values.
I usually throw a class=textfield on <input type=text> so I don't target <input type=submit> or similar.
I would avoid a generic CSS reset, but use something like this:
input[type="text"], input[type="password"], textarea {
width: 60ex;
margin: 0;
padding: 2px; /* it's best to have a little padding */
border: 1px solid #ccc; /* gets around varying border styles */
border-radius: 4px /* optional; for newer browsers */
}
As long as you're in standards mode and not quirks mode this should work fine for most browsers.
Notes:
The attribute selectors - [type="text"] - don't work in IE6 so you may wish to opt for a class name instead.
You can't get all browsers to display form fields exactly the same way.
Using ex as the unit, whilst a good idea, might not work well in a fixed-pixel width environment.
Use pixel rather than EM or pct values. 60px = 60px across all browsers, regardless of base font size.
I'm late to this party, but in case anyone runs into this and needs to use ex's for width, I finally got it to work.
Textareas by default use monospace for their font-family. So, you'll need to override that. This css worked for me:
input[type="text"], textarea {
font-family: Arial, sans-serif;
border: 2px groove;
padding: 2px;
margin: 10px;
width: 35ex;
}
Here's a Fiddle to demonstrate: https://jsfiddle.net/Lxahau9c/
padding left and right 0px