Solved

css wide plus margins paddings

Posted on 2012-03-10
5
257 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 83

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 83

Expert Comment

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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
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…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

752 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