tailieunhanh - Tự học HTML và CSS trong 1 giờ - part 22

Tham khảo tài liệu 'tự học html và css trong 1 giờ - part 22', công nghệ thông tin, đồ họa - thiết kế - flash phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | 186 LESSON 8 Using CSS to Style a Site As you can see the text in the inner div is jammed right up against the border and the inner border and outer border are flush against each other. That s because I ve set both the padding and margin of the inner div to 0. When you re setting a property to 0 there s no need to specify a unit. The results in Figure show what happens if I change the style sheet to this Input .outer border 2px solid black .inner border 2px dotted black padding 15px margin 15px Output FIGURE The inner div has 15 pixels of padding and margin here. As you can see I ve created some space between the border of the inner div and the text inside the inner div using padding and some space between the border of the inner div and the border of the outer div using margin. Now let s look at what happens when I add some margin and padding to the outer div too. I m also going to give both the inner and outer div s background colors so that you can see how colors are assigned to whitespace. I discuss backgrounds and background colors in the next lesson. The results are in Figure . Here s the new style sheet Input .outer border 2px solid black background-color gray padding 15px margin 40px .inner border 2px dotted black background-color white padding 15px margin 15px Download from The Box Model 187 Output FIGURE Both the inner div and outer div have margin and padding. 8 I gave the outer div a large 40-pixel margin so that you could see how it moves the borders away from the edges of the browser window. Note also that there s now space between the text in the outer div and the border. You can also see that the padding of the outer div and the margin of the inner div are combined to provide 30 pixels of whitespace between the border of the outer div and the border of the inner div . Finally it s important to understand the behavior of the background color. The background color is applied to the padding but not to the margin. So the