Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

css wide plus margins paddings

Posted on 2012-03-10
5
Medium Priority
?
270 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 84

Accepted Solution

by:
Dave Baldwin earned 2000 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 84

Expert Comment

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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

722 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