what is the difference between padding and margin? - stylesheet

what is the difference between padding and margin?
both do the same thing.

This image is the better explanation

Wrong!
Padding is internal padding for items inside elements.
Margin is the external padding for the positioning of said element.
[edit] link for goodness: http://webdesign.about.com/od/faqsandhelp/f/bl_faq5_7a.htm

Padding defines the space between the border and the content.
Margin defines the space between other outside elements and the broder.
(source: xhtml.com)
Of course if you don't specify a border, it looks the same.

Margin is distance outside the container's border. Padding is the distance inside of it.
Check out the box model for CSS: http://www.w3.org/TR/CSS2/box.html

Not quite.
Padding adds space between the margins of the control and the inner content.
Margins adds space between the margisn of the control and the outer container.

Related

Remove padding of NSWindow

I want to remove the space of a window in cocoa. I want it like the left one, but I can't find out how to do this.
If you're talking about the padding on the left and the right, you should specify Full Size Content View

Left UIBarButton Item has extra padding to its right

I have a custom UIBarButtonItem that uses an image. There seems to be a lot of extra padding around the button (10 px + I believe). I've seen solutions of how to remove the padding to the left, but my issue is that there is padding to the right.
My buttons image is only 44x44 but I believe the tappable space in iOS7 is more like 44-50 x ~80.
How can remove this space? I can't set a negative space (e.g - 10) to the right of my image because I believe that will be added after my buttons padding.

Make a vector path in xaml responsive

I have a canvas that is within a page in XAML that contains some paths from an .ai document. I would like this to be responsive and have resize according to the proportions of the grid that it is contained on. How?
Okay I fixed it myself. Replaced the canvas with a grid, then enclosed that grid in a viewbox. All paths under the canvas now has horizontal and vertical alignment set to left and top respectively, and its Canvas.Left and Canvas.Top values are now replaced by a margin reflecting these values.

Relative maximum width in XUL

I'm working on a Firefox extension, and am having problems getting relative constraints on the width of elements in the sidebar. For example, I want a description element in the sidebar that will always be as big as the sidebar when the sidebar is resized, and has text wrapping accordingly.
If I put a description in a box with a fixed maximum width, it will wrap correctly, but I can't get relative widths to work correctly using css. If is set the max-width to be 100% in css, it seems to just ignore it and the text will be on a single line and will overflow the sidebar. Any suggestions on how to put relative width constraints on a box in XUL so that text will wrap correctly?
It sounds like setting maximum width isn't what you really want. Have a look at https://developer.mozilla.org/en/XUL_Tutorial/The_Box_Model, setting flex attribute would be the right approach to make an element fill all the available space (typically flex="1"). The corresponding CSS property would be -moz-box-flex: 1.

Does Expression Blend have a concept of trim/crop?

I'm rebuilding the graphic on the left as the graphic on the right in Expression Blend.
The gradient brushes are great for creating reflection effects but how do I now trim the button on the right now so that it cuts off the rest of the reflective circle?
I can rotate, scale, skew, recenter, and flip but I can't find trim or crop.
And when I select both the top and the bottom to do "combine/intersect" all options are greyed out when I select "combine".
Is trimming the way I want to here possible in Expression Blend or I am reaching the limits of what the underlying XAML could represent?
Or is there an easier way to achieve the graphic on the left?
alt text http://tanguay.info/web/external/trimInBlend.png
Have you tried using a clipping path?
http://blogs.msdn.com/expression/archive/2008/01/21/clip-path-editing-and-animating-in-blend-2.aspx
I would apply a gradient on the graphics on the right and make it fade to transparent. That way, no need to crop anything.