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.
Related
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.
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 4 years ago.
Improve this question
Is it good practice to use CSS display: grid instead of the html tag <table>?
There are many times when <table> in responsive design is difficult to use. Especially for complex shop basket tables and handling colspan etc. However with css-grid it's an easy one.
I see some problems in styling rows like <tr> for table. There are ways with nth-child stuff. What do you think about it?
If you know CSS grid and are comfortable using it, there is no good reason not to use it. Support is good enough CSS grid support at this point
In fact I highly recommend using anything over <table> for layout. Tables should be used for tables with data in it. Flexbox is also a great option depending on the situation. Ideally you would know when CSS grid is appropriate and when flexbox is, or when both can be used in tangent.
In conclusion it is 2018 and tables should be used as little as possible for this purpose. Move towards the future with flexbox and CSS grid.
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 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 8 years ago.
Improve this question
I recently made a website for a church. I used Foundation, SASS, and Compass. I've almost got it finished up when I notice that if you size the window down I get a horizontal scroll. So I add overflow-x: hidden; I thought that fixed it but when I tested it on my iPad I am still getting roughly 20px of padding on the right side. I then thought maybe it was from the box-shadow which made sense so I removed all the box shadows and its still there. Here is the link: http://www.jessefoutch.com/fumc/ any help would be appreciated.
Foundation already has its own set padding and margin for grid-columns and other grid elements. You can either change these parameters in the _settings.scss file in Foundation, or you can set the padding or margins to 0 manually and that should fix any of your issues. I checked and didn't actually see the issue you were speaking of however, so it may no longer be affecting your site
Perhaps you need to clear your cache. I have looked at the site in Firefox, Safari, and Chrome and only saw the standard browser scroll bar when I resized.
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 5 years ago.
Improve this question
I'm looking at only latest gen browsers:
IE9 (haven't really looked into this once much)
FF4
Chrome10
Safari5
iOS 3.4
Opera?
I know I can get squares and rectangles easy, circles and ellipsis with rounded borders (circles: W=H, ellipsis: W!=H). I know I can get slopes with border settings. I know how to get 1/2 and 1/4 circles, but is it possible to get:
Pie wedge (any size, at any location in the circle? ie. a 18% wedge, 20% off the horizontal)
Trapezoids, octagon, pentagon, hexagon
Stars (n pointed stars)
Any of the individual shapes in this that aren't already mentioned
I'm looking for CSS + DIV options, not <canvas> options. I'm also looking for options that use the least amount of nested divs. Here is an example that shows several shapes in one example...
Check out this page for some examples: http://css-tricks.com/examples/ShapesOfCSS/. The examples use only a single HTML element, so more would be possible with added complexity.