Solved

css wide plus margins paddings

Posted on 2012-03-10
5
236 Views
Last Modified: 2012-03-12
hello,
I have been confused so many times and would like confirmation on the following. If i have a set width. and I add padding. does that set width now become width + padding. Also were I to have set width with margins and padding will that total width become width + padding + margins like the last one listed below. would this take up total space of 500px

cheers for that help


<body>
<div style="width:400px">Hello with width only</div><br>

<div style="width:400px; padding:25px;">Hello with width and padding only</div><br>


<div style="width:400px; margin:25px;">Hello with width and margins only</div><br>


<div style="width:400px; margin:25px; padding:25px;">Hello with width and margins and padding only</div><br>
</body>
0
Comment
Question by:dizzynono
5 Comments
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 37704848
Unfortunately the rules for this are not set in stone. If you're up for some reading go here: http://www.quirksmode.org/css/quirksmode.html

Even with that I often find myself just testing things like this out in a number of recent versions of browsers. If I really need a specific lay-out I sometimes use "container" div's to make sure I get consistent results.

What you need to know for starters is there's a different way to process depending on a number of things:
- which browser you use (obvious maybe but you don't mention it in the question)
- DOCTYPE (put a tag at the top of your file to define this)
- using inline styles (like in your example) or external css file

Now, with a bit of luck that will all end when everybody converts to HTML5 ;-)
0
 
LVL 1

Expert Comment

by:stlbuddhist
ID: 37704859
Here is the element sizes

The block element div with width:400px would be 400px wide (from window margin)

The div width:400px; padding:25px is actually 450px wide (same for window margin)

The div width:400px; margin:25px is 400px wide (but 425px from window margin)

The div width 400px; margin 25px; padding 25px is 450px wide (475px from window margin)
0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 37706302
Here is the standard box model: http://www.w3.org/TR/CSS2/box.html  The specified width of an element is the content.  Everything else gets added to the outside of the box.  So...

width = 400px
add padding = 10px  total = 420px because padding is on all sides unless otherwise specced
add border = 10px  total now = 440px
add margin = 10px total now = 460px.

The height would also increase by 60px with those dimensions.
0
 

Author Closing Comment

by:dizzynono
ID: 37711524
Thank you all,
Dave  your solution was easy for me to understand and will work on the concept of "Everything else gets added to the outside of the box.  "

thank you all

thanks dave

d
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 37711608
You're welcome, glad to help.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now