Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
editAsk a Question
Welcome To Ask or Share your Answers For Others

Categories

html - keep padding from making the element bigger?

in Technique[技术] by (71.8m points)

I have an element with a 70% width, and it is floating beside an element with 30% width, but when I add 25px of padding it expands the element and breaks the format, is there any way to make it just increase the contents distance from the edge as opposed to just making it bigger?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
319 views
Welcome To Ask or Share your Answers For Others

1 Answer

by (71.8m points)

When you use the border-box model, the padding is included in the box size. See here for details.

<!DOCTYPE html>
<html>
    <head>
        <title>padding example</title>
        <style type="text/css">
        .seventy {
            display: block;
            float: left;
            width: 70%;
            background-color: red;
        }
        .thirty {
            display: block;
            float: left;
            width: 30%;
            padding: 25px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            background-color: green;
        }
        </style>
    </head>
    <body>
        <div class="seventy">Stuff</div>
        <div class="thirty">More Stuff</div>
    </body>
</html>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share

Just Browsing Browsing

548k questions

547k answers

4 comments

86.3k users

Most popular tags

Theme made by Momin Raza, Modified by Ostack
Powered by Question2Answer
...