asked on
css wide plus margins paddings
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>
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>
CSS
Last Comment
Dave Baldwin
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)
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)
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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 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
You're welcome, glad to help.
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 ;-)