What is “padding” in web design and development? According to w3schools.com, “the CSS padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once.”
How about a “margin”? From the definition above, we can say that a “margin” is the space outside the element border and around it.
Now, with regards to padding in browser compatibility issue, they throw different outputs in different browsers. You can have a value of 0 in your code of the padding in Internet Explorer but have a 1[+] value for Firefox. As an example, let’s say we have a bulleted unordered list at the right hand portion of an image which is the left element (positioned at the left). Stick to the fact that the list does not (yet) go down beyond the height of the image on the left. With IE(7), there is no need to define a value of the “padding” or you can set it to 0, that wouldn’t create any misalignment of the elements present with respect to the image on the left and the list on the right. But for FF(3), you would have a [+] value of the padding in the element list. Below is a sample code for IE and FF using CSS.
In these codes, please note that the value of the padding is true and equivalent to its “top”, “right”, “bottom”, and “left” (T,R,B,L) sides. While setting it to in the case of Firefox, will make its “top=5px”, “right=3px”, “bottom=5px”, and “left=3px” respectively.
Did you notice something in the code? We have a missing “ul” tag and its equivalent ending tag “/ul”. What does this relate to the unordered list that we have in our example? If we want an indented list with respect to the element on the left which is the image then we can insert the tag “ul-/ul”. By the way, the browser defaults the list to be an unordered list “ul”. But if we want the list to be aligned with any other element (on the right side per our example) example: text paragraphs then we can omit the “ul-/ul” tag.
Jefferson Danipog