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 2 years ago.
Improve this question
I've recently started learning Wed Development online by myself and new to this area, so apologies for my basic query.
I know the difference between Margin and Padding (in a logical term) but not so sure 'when we should use Margin and Padding'... On a lesson, a lecturer used "Margin" to give some space between "Tick Icon" and "Easy to Use" text (see below images), but can padding be used here as well? If not, what might cause an issue if I use padding for this?
Also, she used "rem" for margin and "%" for padding. What are the difference between using rem and % (and px)?
Thank you very much for your help on this.
Margin is the space around elements.
Padding is the space around the elements contents.
So margin is outside the element.
Padding is inside.
You can use margin when you are placing elements near each other
You can use padding when you are changing how a element interacts with other elements.
(not a good explanation)
Also pixel is the pixels on the screen.
Rem is "Relative to font-size of the root element" (w3schools) https://www.w3schools.com/cssref/css_units.asp
Hope this helps.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm seeing some crazy layouts sometimes. One of them is layout where we have boostrap container that has max width, let's say 1120px.
One of columns has 50% width of container, and the second has 50% width, not container but browser.
I've attached 2 screens to clarify my question - and the question is: does anybody has claver solution, that is responsive and will not break things during resisizing ?
So, 2 columns will not collapse ?
I will not provide html / css code, as i have no idea, how to code this right and without javascript.
If any of You have any ideas, i'm saying "thanks for a tip :)"
you can use width: calc() to calculate any width you want.
quick example
https://codepen.io/kupas/pen/Yepadv
PS: for smaller screen use mediaqueries
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've seen many people suggesting setting *{ margin:0;padding:0;}. It does prevent lots of unexpected margin/padding on the page.
But if it's first thing we ought to implement every time we create a CSS file, why do the browsers bother to set default element margin/padding other than 0?
I guess giving a default margin makes sense to elements like <p> to keep the paragraph spacing. But again, if we are suggested to put the * reset every time, the browsers' default settings don't matter anyway, right?
There really is no exact answer to your question. But, the most logical reason to put a preset margin and padding is to most likely make webpages automatically more appealing to the user. If you see a website with text right up against the side of a page, it starts to look a little stretched and sketchy. So, to counter this, they set a margin and padding.
Bryce
A <h1> in example unfortunately has a browser-specific margins (see specific to the browsers). Setting margin/padding to 0px is a poor version of a normalizer that redesign all css to a clean cross-browser design from what you can start to write css that let the browsers render the same style.
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'm not sure if this is really the right place for this question, so if someone knows of a more appropriate StackExchange site, please share and I will be happy to move the question.
I'm currently trying to make it a habit to use relative measurements for CSS instead of px to accommodate the ever-increasing number of users who have ultra-high resolution monitors i.e. 4K.
In doing so, I got to thinking - should rem be used for everything that would have used px?
I'm currently finding that I'm using rem for border-radius, margin, padding, and font-size. After searching the interwebs for a bit, I couldn't really come up with any sort of guide for what is appropriate to use rem on, so I figured I would ask here - Are there any cases where you wouldn't want to use rem or em as the measurement for a property, but instead use px? Or is it pretty much just commonplace to use rem for everything?
rem is relative to the font size defined in the root node while em is relative to the font size of the current node.
I generally use rem for everything except if the value depends on the font size of the current element.
E.g. Given two versions of a H2 title: h2 with 40px and h2.large with 45px, then the bottom margin is relative to the size of the h2 element if you used em here.
I would use Pixels for small values such as border-width. The rendering is usually better.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having a terrible time getting my height of my DIVs to properly scale with the height of the DIV's containted inside of them. Currently the DIVs that contain other content DIVS are not set to any specific height, but for some reason they have a height way beyond the content that is contained in them (which currently isn't anything)
Here is the link:
http://www.brockpatterson.com/secret.php
As you can see, the 1st blue area is super tall, and the lighter blue area below is the same. I'm not sure if some other CSS element is messing with it. I've been looking at it and messing with different perameters for a few hours now.
Thanks,
drummer
#content_container is set to 100% height. Remove that and you'll be fine.
Why do you have height: 100% at #content_container?
(Also, you should never have two HTML elements with the same ID...)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
In what cases these are useful?
table-layout
font-stretch
font-size-adjust
orphans and widows
marks
clip
orphans and widows are used commonly in print to avoid a single line at the bottom or top of a page.
More info can be found here just do a quick search
http://www.w3schools.com/Css/pr_tab_table-layout.asp
I use table-layout: fixed a fair amount, but the others not so much. I've found that table-layout: fixed, along with <col> tags will speed up the rendering of a page with a very large table because the browser doesn't need to process the contents of all data in the table to calculate column sizes. It is also useful to have two tables with columns that align perfectly.
Clip looks like it could be useful, but I haven't used it before. A good article on clip is here:
http://www.ibloomstudios.com/articles/misunderstood_css_clip/
Orphans, widows, and marks are useful in print stylesheets I believe. And the font ones are for scaling height/width of fonts. I'm not sure how supported any of those are, but table-layout is well supported.