发表新帖
发表新帖

Why
    adds extra top margin?

前端 未结
关注
8 931
礼貌的吻别
礼貌的吻别 2020-12-01 23:47

I have a simple html page with some style in it and I do not understand why the adds some top margin?

Here is the source:

相关标签:
8条回答
  • 太阳男子
    2020-12-02 00:18

    You need to reset your css or each browser uses some default css rules for some elements. Use a reset css like this normalize.css or some ui framework like bootstrap and foundation

    0 讨论(0)
  • 滥情空心
    2020-12-02 00:21

    It's the default CSS behaviour presented by most of browsers. It has been there since the dawn of the Web.

    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-02 00:31 

    <!doctype html>
<html>

<head>
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background-color: #ffffcc;
        }
        
        #content {
            width: 900px;
            margin-left: auto;
            margin-right: auto;
            border: 0;
            background-color: #ccccff;
        }

        #content ul {
            font-size: 0;
        }
        
        #content ul a {
        font-size: 16px;
        }
        
    </style>
</head>

<body>
<div id="content">
    <div>
        <ul>
            <li><a href="./xxx.html">xxx</a>
            </li>
            <li><a href="./yyy.html">yyy</a>
            </li>
            <li><a href="./zzzz.html">zzz</a>
            </li>
        </ul>
    </div>
</div>
</body>

</html>

    0 讨论(0)
  • 北海茫月
    2020-12-02 00:33

    Typical Default UL styling 

    ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px; }

    Reference

    If you want plain vanilla css for your html you can few css in your stylesheet

    Vanilla CSS

    0 讨论(0)
  • 南旧
    2020-12-02 00:36

    The margin on the <ul> comes from the default styling that a browser adds to the element. For example if you open Chrome's DevTools and inspect the <ul> element you'll see styling like this. The user agent stylesheet refers to the browsers default styling. 1em of margin becomes 16px as the browser has a font-size: 16px by default.

    As the default styling isn't the same between browsers a common technique is to use a reset stylesheet, like Eric Meyer's Reset CSS or Nicolas Gallagher's normalize.css, to reduce these browser inconsistencies.

    Default <code><ul></code> styling taken from Chrome's DevTools

    0 讨论(0)
  • 遥遥无期
    2020-12-02 00:36

    Sheesh, read the OP people.

    Unordered lists were originally meant for content on the page, same as paragraph and or heading elements. They have default browser margins to apply logical whitespace in between blocks of text for easier reading.

    • This is a bulleted list
    • This is another list item
    • notice the spacing above and below

    If it was bunched together without margins the world would combust, universe would collapse, and people would have trouble reading the content on the page, and in books, and on posters, and fast food cups, etc.

    The margins applied are a standardization across all mediums. Print, web, yada. That is why it is.

    Now unordered lists have been adopted into many other arenas in the web to tackle navigation, dropdowns, and a plethora of other gimmicks, which is why everyone is ranting over resets, because ul's can be used for other purposes than that which it was originally intended.

    If you so choose to break away from the conventional standardization, for whatever reason, then personally I cannot recommend a reset. I do, however, approve of normalize.css, for the most part--again only use what you need but it strives to "normalize" the differences in browser default styling instead of clearing them all out completely.

    What I really recommend, is you create your own styles based on your own needs. If you don't want margins on paragraphs, headings, and lists, then simply write:

    ul,ol,p,h1,h2,h3{ margin-top:0; margin-bottom:0 }

    It's slim, light, and doesn't require cluttered resets on elements you don't even use. Only use what you need. OR better yet, you may want to use the default margins at some point, instead try:

    .no-vmargin{ margin-top:0; margin-bottom:0 }

    Now any element you don't wish to have a top or bottom margin on you can apply class="no-vmargin" granted this isn't very semantic and you should probably follow a classing naming convention specific to your needs. But that's another topic entirely.

    Here, I even made ya a fiddle

    0 讨论(0)
 看不清?
提交回复
热议问题