tailieunhanh - HTML cơ bản - p 18

154 Chapter 3: Elements of Style M A r G i N S A N d PA d d i N G Most HTML elements are rendered with some amount of space between them. For elements without a border, this space is composed of margin and padding on each of the element’s four sides. For elements with a border, the margin is the amount of space on the outside of the borders, and the padding is the amount of space on the inside of the border. Both the margin and padding properties can take any size value, including a percentage value and the. | 154 Chapter 3 Elements of StyLE MARGINS AND PADDING Most HTML elements are rendered with some amount of space between them. For elements without a border this space is composed of margin and padding on each of the element s four sides. For elements with a border the margin is the amount of space on the outside of the borders and the padding is the amount of space on the inside of the border. Both the margi n and padding properties can take any size value including a percentage value and the keyword auto. A margin value can be negative and will cause an element s position to be shifted possibly to overlap another element. A negative padding value is effectively taken as 0. It will not cause the content to be shifted into the border or margin areas. Example is an HTML page with three paragraphs each one having different margin and padding values. The first paragraph has a 0 margin and 2 em of padding. The third paragraph reverses that with a 2 em margin and 0 padding. The paragraph in the middle has 1 em each of margin and padding. The text is from a children s story by the English mathematician Charles Lutwidge All body elements are given a light gray background to illustrate the effects. Figure shows how the HTML appears in a typical browser. Example Use of margin and padding for block elements DOCTYPE html html head title Example title style type text css body font-family Comic Sans MS cursive background-color ccc p1 margin 0em padding 2em p2 margin 1em padding 1em p3 margin 2em padding 0em style head body p id p1 In a minute or two the Caterpillar took the hookah out of its mouth and yawned once or twice and shook itself. p 4. Writing under the pseudonym Lewis Carroll in Alice s Adventures in Wonderland. From the Library of Wow eBook Box Properties 155 p id p2 Then it got down off the mushroom and crawled away in the grass merely remarking as it went p p id p3 One side will make you grow taller and the other side will make you grow .