Are Margin and Padding Most Disbalanced Thing Among All Browser

are margin and padding most disbalanced thing among all browser?

You can find all default styles here: CSS2.1 User Agent Style Sheet Defaults.

If you investigate the list closely, then you'll notice that the browser-specific margins are only set for HTML-standard block elements and that nowhere a browser-specific padding is been set. In other words, the padding: 0 is superfluous. But indeed, the margin is the most disbalanced among browsers, to answer your actual question.

I am probably going to tread on someone's toes here, but in my humblest opinion using a CSS reset stylesheet is ridiculous. You would have to redefine most of those margins (and paddings) yourself anyway. You could as good just learn and keep yourself the rule to define yourself the margin (and if necessary padding) for every block element which you're going to use in the document.

As to the remnant of the reset:

  • The border: 0 is superflous as well. The <hr> and the most form input elements are the only elements which have a default border. Without it, the <hr> is invisible (actually, this fails in IE6/7) and the text input elements on a form with same background color are invisible as well.

  • The outline should certainly not be resetted, it breaks accessibility. You need to control it yourself, e.g. resetting it yourself on only links with a (background) image since that's the major reason to reset it. But still, it breaks accessibility. Rather consider giving it a different outline color or style so that it is still visible, but less disturbing.

  • The font-size: 100% would force you to redefine them yourself in the <h1>, <h2>, etc elements. But even without the reset, you would often already like to do that anyway. What's the point of this reset then?

  • The vertical-align: baseline; breaks alignment of <sub> and <sup> so that they look like <small>. Further the table headers may also be affected. Those defaults to middle in all browsers. You would need to redefine them yourself again. Plus, it is known that this reset may cause IE6/7 to go havoc with images.

  • The value of background: transparent; is unclear to me. I don't see any point of this reset expect that it may make IE6/7 mad. You would also need to redefine the background color for all form input elements yourself again which just adds more work (for the case they're placed in a colored container). I am sure that whenever you encounter an element which needs transparent background, you could easily spot that yourself and set it yourself.

Enfin, see what you do with this information. I don't stop you from using the CSS reset. I myself have found the CSS reset only useful >10 years back when I was just starting with HTML/CSS. But with years and years, I've learnt as well that this is plain nonsense. But I admit, it's useful for starters since the reset will force them to set the margins and other stuff themselves explicitly. Which you could do as good without the reset.

What's the standard margin of a p element?

Browser specific CSS defaults are outlined here.

Here's an extract of relevance for the margin of the p element:

  • W3: 1.12em 0
  • IE7: 14.25pt 0
  • IE8: 1em 0
  • FF2: 1em 0
  • FF3: 1em 0
  • Opera: 1em 0
  • Safari 3.1: 1em 0

Reset stylesheets are by the way ridiculous. Just set the desired margin yourself if you want it to be consistent among browsers.

p {
margin: .75em 0;
}

See also:

  • Are padding and margin most disbalanced among browsers?

What are cons of global css reset * { margin: 0; padding: 0; }?

The problem is that there are some elements that need margins and/or padding to display properly, and people forget to set them back. Also, for many elements, you are going to be setting your own styles, overriding the reset, so the reset is redundant; you should instead just set the styles the way you want them.

One problem I see a lot is with lists. If you blindly apply a reset, the bullets for the list will appear outside of the containing element, which always bothers me:


+--------------------+
| Some paragraph, |
| with text. |
| |
*| One |
*| Two |
*| Three |
+--------------------+

Perhaps some designers are deliberately doing this, but I think a lot of the time I see this, it's because someone has blindly applied a reset and not thought about what it would do to the indentation of list items. If you look for this, you will see it all over the place; and pretty much invariably, the site you see it on uses a CSS reset. For more information on how to format lists correctly, see Consistent List Indentation on the Mozilla Developer Center.

Another problem is that after doing a reset, there are sometimes obscure elements that people don't remember to apply margins back to. For instance, the <dl> element; it's default style isn't great, but it at least lets you distinguish between the <dt> and <dd> elements within them. If you apply a reset, you lose that and wind up with everything crammed together with no distinction. Stack Overflow's reset does this, for instance, making <dl> elements pretty much useless:


Term

Definition

Term

Definition


Stack Overflow's reset also lacks any top or bottom margins on the <dl> element, and only a bottom margin to <p>; so I had to add an extra <br> in order to prevent the above <dl> from running up against this paragraph.

If you do use a reset, be very careful to make sure that all HTML elements do display in a sensible way. And remove the parts of your reset that are overridden by later rules that you add; there's no real reason to reset <b> and <i>, and then later apply font-weight and font-style to them, and if you reset a margin to 0 and then set it to 2 em, then why not remove the reset to 0?

Why write all the tags to assign one style is better than using universal selector (*)?

No control over exactly which elements are reset – every element used in the document must now have its margin and padding set explicity, plus any other properties such as border and outline that may be included in the reset .

Wave goodbye to inheritance of CSS rules from parent to child elements – the universal selector wins out every time. So not only must every element be defined after the reset, but child elements now cannot inherit each element’s properties, and so they must also be explicitly defined. The amount of code this requires may even negate the size-savings from the minimal CSS Reset!

According to the universal declaration, a browser must run through every element on the page and apply the universal rule: elements, their children and great-great-great-grandchildren all alike, and some claim that this may be a huge hit on resources and page load times (this point is debatable for modern browsers.)

Internet Explorer versions up to and including 6 exhibit the star HTML selector bug: selectors that should fail, don’t. A descendant selector, such as * html, shouldn’t match any elements, because the html element is the top-most parent element and, as such, it can’t be a descendant of any other element. However, Internet Explorer versions 5.5 and 6 ignore the universal selector at the beginning of this selector.

When the universal selector is immediately adjacent to an element type selector, Internet Explorer versions 6 and 7 will interpret the combination as a descendant selector instead of failing as they should. In Internet Explorer 6 and 7, this selector will also select some inappropriate SGML elements such as the doctype declaration and comments.

Why is there the need for browser resets?

Because certain rules make sense by default:

  • Table cells have display:table-cell;
  • <b> makes text bold, <i> makes text italic
  • Paragraphs should have space in between them
  • Unordered lists should be displayed as bulleted lists

The problem isn't that browsers have defaults, it's that the defaults are all different.

How to balance my image (and text) inside div and both must remains responsive

#wrapper{
display:flex;
width: 100%;
justify-content: space-around;
}
.party{
display:inline-flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 2%;
width: 33.33%;
}
.party-image-wrapper {
position: relative;
width: 100%;
height: 0;
border: solid black 2px;
padding: 0.3%;
padding-top: 100%;
margin: 2%;
max-width: 100%;
max-height: 100%;
}
.party img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
input[type = button] {
background-color: black;
padding: 10px 20px;
color: white;
margin: 2px 1px;
cursor: pointer;
}
<div id="wrapper">
<div class = "party">
<div class="party-image-wrapper">
<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg">
</div>
<h3 style = "font-size: 2vw;">Party Events</h3>
<p style = "font-size: 1.5vw;"> Want flower decoration for your birthday, ceremonies, baby showers and any party events? Consult to our florist now!</p>
<input type = "button" value = " Shop Now "/>
</div>
<div class ="party">
<div class="party-image-wrapper">
<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg">
</div>
<h3 style = "font-size: 2vw;"> Wedding Events </h3>
<p style = "font-size: 1.5vw;">We offer free consultation for a bride-to-be. Call our store to make an appointment on <b>+64 85459 3943</b></p>
<input type = "button" value = " Shop Now "/>
</div>
<div class = "party">
<div class="party-image-wrapper">
<img src = "https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=49ed3252c0b2ffb49cf8b508892e452d">
</div>
<h3 style = "font-size: 2vw;">Sympathy</h3>
<center>
<p style = "font-size: 1.5vw;"> Fresh flowers that express heartfelt thoughts and sincere condolences. Talk to our dedicated team by phone or come in to meet with our flourist in a private consultation.</p>
</center>
<input type = "button" value = " Shop Now "/>
</div>
</div>

How to overflow the image inside a div in the top and bottom and not just in left and right?

So i just needed to add padding to it

background-size: 160% auto;
padding: 112px;

.sectionForm {        margin: 0 auto;  background: url("https://image.flaticon.com/icons/svg/1914/1914882.svg") no-repeat center center;    background-size: 160% auto;    padding: 112px;    }    .sectionForm form {        width: 400px;        box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);        border-radius: 40px;        background-color: white;    }    .form-container {        display: flex;        flex-direction: column;        align-items: center;        justify-content: center;        padding: 66px 0 50px 0;    }    footer {        height: 1500px;    }
.form-container input { border: none; border-bottom: 1px solid #828282; padding: 26px 0; margin-bottom: 100px; font-size: 20px; color: #4F4F4F; }
<br><br><br><br><br>

<div class="sectionForm"> <form> <div class="form-container"> <input type="text" id="fname" name="fname" value="Nome"> <input type="text" id="lname" name="lname" value="E-mail"> <input type="text" id="lname" name="lname" value="Assunto"> </div> </form> </div> <br><br><br><br><br>


Related Topics



Leave a reply



Submit