Share this Page URL

Chapter 16. The Box Model: Styles for Di... > Cushy Content: Adding Padding to the... - Pg. 181

The Box Model: Styles for Dimensions, Borders, Margins, and More <HTML> <HEAD> <TITLE>Style Sheet Dimensions</TITLE> <STYLE TYPE="text/css"> <!-- P {border: thin solid} --> </STYLE> </HEAD> <BODY> <P>This is a regular paragraph. <P STYLE="height: 50px">This is a paragraph that's 50 pixels high. <P STYLE="width: 100px">This is a paragraph that's 100 pixels wide. </BODY> </HTML> 181 Figure 16.2. Some paragraphs with different dimensions. Page Pitfalls There are some browser peculiarities you have to worry about with the pad ding properties. In Netscape 4 and Internet Explorer 4 and later, the size of the block remains the same and the text inside the block is shoved aside to make room for the extra padding. In Netscape 6, however, the text remains the same and the block size is increased to make way for the new padding. Also, it's possible to use a percentage value for the padding, but the value is interpreted differently in different browsers: With Internet Explorer, the percentage is based on the dimensions of the current block, but with Netscape, it's based on the current size of the browser window. Therefore, I suggest avoiding percentages altogether and using only absolute values. Cushy Content: Adding Padding to the Inside of the Box