Solved

css wide plus margins paddings

Posted on 2012-03-10
5
241 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 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…

861 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

23 Experts available now in Live!

Get 1:1 Help Now