CODEWITHSUNDEEP
csshtmlmargin
Astrid
Astrid

Reputation: 1312

css div margin moving entire div instead of content

i have:

HTML

<div id="container"><div id="left"><div class="box">blahblah</div></div></div>

CSS

.box  {
    height: 200px;
    width: 300px;
    margin: 50px;
    background:url(box.png) no-repeat } 
#container{
    width:100%;
}
#left{
    float:left;
    width: 260px;
    height: 600px;
}

When i add margin: 25px; to the .box class, it moves the entire box div across the page. What should i do in order to margin the content (blahblah) within the div (.box)?

Upvotes: 0

Views: 1343

Answers (2)

Adrift
Adrift

Reputation: 59859

If I understand your question you're simply looking for padding: 25px; instead - this adds space inside the box dimensions or around the content box and within the border edge

Here is a simple model to help visualize the box model:

http://img199.imageshack.us/img199/4949/boxdim.png

Take a look at the Box Model section in the CSS 2.1 Spec: http://www.w3.org/TR/CSS2/box.html to learn more

Upvotes: 1

Mike H.
Mike H.

Reputation: 1751

You must consider the fact that CSS uses a "box model"

http://www.w3schools.com/css/css_boxmodel.asp

Margins are for external space limitations whereas padding is used for internal.

Upvotes: 1

Related Questions