Margins and Padding are the spaces between the elements such as the div tags and the contents(text/images) in your web pages. To a degree they are similar in managing the white spaces between the elements and the content but they do serve a different
purpose or role in designing the placement of elements in the web page. For example the margins and the padding on a div tag are separated by the boarders. The margin is the outer space round an element or between the boarder (outside the boarder) and the next element or elements. Padding on the other hand is the space inside the element.
purpose or role in designing the placement of elements in the web page. For example the margins and the padding on a div tag are separated by the boarders. The margin is the outer space round an element or between the boarder (outside the boarder) and the next element or elements. Padding on the other hand is the space inside the element.
In the above infographic I have three div tags. The outer div tag indicated by the blue background and the two inner div tags are indicated with a red background and a yellow background color. Margins are set at 15px and the padding is set at 10px.
Sample coding (side note, the colors might be bit differ)
<!DOCTYPE html>
<html>
<head>
<style>
.demo1 { background-color: #F08080;
width: 300px;
border: 3px solid red;
padding: 10px;
margin: 15px;
}
</style>
</head>
<body>
<h2>Demonstrating Margins & Padding</h2>
<div class="demo1">
Demonstrating how margins & Padding might appear in a coding example.
</div>
</body>
</html>
If you have any questions please leave a comment.
No comments:
Post a Comment