We help IT Professionals succeed at work.

css wide plus margins paddings

dizzynono
dizzynono asked
on
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>
Comment
Watch Question

Robert SchuttSoftware Engineer
SILVER EXPERT

Commented:
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 ;-)
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)
Fixer of Problems
SILVER EXPERT
Most Valuable Expert 2014
Commented:
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.

Author

Commented:
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
Dave BaldwinFixer of Problems
SILVER EXPERT
Most Valuable Expert 2014

Commented:
You're welcome, glad to help.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.