找到你要的答案

Q:Padding does not work, but margin does

Q:填充不工作,但边距

**I got text in a div after 10 the margin works with it but for some reason the padding does not work. So if someone could tell me what is wrong??? It is a html5 taskbar/10 images in a row which i comment out when needed. **

HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Waylon's Unturned</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../css/main.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
    <header class="mainHeader">
        <img src="../img/logo.jpg">
        <nav><ul>
        <nav><ul>
            <li><a href="../index.html">Home</a></li>
            <li class="active"><a href="../other_pages/donate.html">Donate</a></li>
            <li><a href="http://waylonsunturned.boards.net">Forum</a></li>
            <li><a href="../other_pages/contact.html">Contact</a></li>
        </ul></nav>
    </header>
    <div class="mainContent">
        <div class="content">   
                <article class="topcontent">    
                    <header>
                        <h2>About donations</h2>
                    </header>
                    <content>
                        <p>Thank you for considering a donation, all of the donations will be used to improve the server, website and forum.</p>
                            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                                <input type="hidden" name="cmd" value="_s-xclick">
                                <input type="hidden" name="hosted_button_id" value="BF766GY6YY8XN">
                                <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
                                <img alt="" border="0" src="https://www.paypalobjects.com/nl_NL/i/scr/pixel.gif" width="0" height="0">
                            </form>
                    </content>

            <h1><center><tt><b>Our Donation Goal :</b></tt></center></h1>
            <p>We try to get 30 euro's each month to keep all of our servers, the website and the forums running.</p>

                    <div class="taskbardiv">
                    <img class="taskbar" src="../img/loadingbarblack.png" width="1" height="40">
                    <!--<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">    
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">    
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">--> 
                    <p class="taskbarp">0% Complete</p>
                    </div>
                </article>
        </div>
</body>
</html>

CSS3:

.taskbarp{
    color: #82a213;
    float: right;
    font-size: 5;
    padding-left: 20px;
    margin: 10;
}


.taskbar{
    border-radius: 5px;
}

.taskbardiv{
    background: black;
    border-radius: 10px;
    padding-top: 6px;
}

*我有文字在div后10保证金与它但由于某些原因,填充不工作。所以如果有人能告诉我什么是错的???这是一个HTML5的任务栏/ 10幅图像在一排,我评论了在需要的时候。* *

HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Waylon's Unturned</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../css/main.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
    <header class="mainHeader">
        <img src="../img/logo.jpg">
        <nav><ul>
        <nav><ul>
            <li><a href="../index.html">Home</a></li>
            <li class="active"><a href="../other_pages/donate.html">Donate</a></li>
            <li><a href="http://waylonsunturned.boards.net">Forum</a></li>
            <li><a href="../other_pages/contact.html">Contact</a></li>
        </ul></nav>
    </header>
    <div class="mainContent">
        <div class="content">   
                <article class="topcontent">    
                    <header>
                        <h2>About donations</h2>
                    </header>
                    <content>
                        <p>Thank you for considering a donation, all of the donations will be used to improve the server, website and forum.</p>
                            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                                <input type="hidden" name="cmd" value="_s-xclick">
                                <input type="hidden" name="hosted_button_id" value="BF766GY6YY8XN">
                                <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
                                <img alt="" border="0" src="https://www.paypalobjects.com/nl_NL/i/scr/pixel.gif" width="0" height="0">
                            </form>
                    </content>

            <h1><center><tt><b>Our Donation Goal :</b></tt></center></h1>
            <p>We try to get 30 euro's each month to keep all of our servers, the website and the forums running.</p>

                    <div class="taskbardiv">
                    <img class="taskbar" src="../img/loadingbarblack.png" width="1" height="40">
                    <!--<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">    
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">    
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
                    <img class="taskbar" src="../img/loadingbar.png" width="40" height="40">--> 
                    <p class="taskbarp">0% Complete</p>
                    </div>
                </article>
        </div>
</body>
</html>

CSS3:

.taskbarp{
    color: #82a213;
    float: right;
    font-size: 5;
    padding-left: 20px;
    margin: 10;
}


.taskbar{
    border-radius: 5px;
}

.taskbardiv{
    background: black;
    border-radius: 10px;
    padding-top: 6px;
}
answer1: 回答1:

I'll try to help, although I don't know if I really understand your question:

  1. Always use measurements (like px, em or %) when working in CSS! Your font-size as well as your margin are missing them, so they will simply be ignored by the browser.
  2. Both paddings work as expected but padding-left doesn't make much sense when you're floating the text to the right side of the container.

That's all I can see for now, hope that helps you.

我会尽力帮忙的,虽然我不知道我是否真的理解你的问题:

  1. Always use measurements (like px, em or %) when working in CSS! Your font-size as well as your margin are missing them, so they will simply be ignored by the browser.
  2. Both paddings work as expected but padding-left doesn't make much sense when you're floating the text to the right side of the container.

这就是我现在所能看到的,希望能对你有所帮助。

html5  css3  paragraph