-->

CSS Padding and Margin Tutorial

CSS Padding and Margin Tutorial

CSS Padding and Margin Tutorial

CSS Padding and Margin Tutorial:

Padding is the distance between the border of the HTML element and the content. Border any HTML element with CSS. Now place the padding there so that you can see / understand clearly where the blank space increases. E.g.


border: 2px solid #fff;
padding: 5px;


See application

<!DOCTYPE html>
<html>
<head>
<style>
h1
border: 2px solid # f00;
padding: 5px;}
</style>
</head>
<body>
<h1>Myhtmlcode</h1>
</body>
</html>

padding: 5px; There will be 5 pixels of space around the element. Padding can be given only on one side or a few sides. E.g.

padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;

This way writing can be done four times at once, as it is called shorthand property.

padding: 5px;
Or
padding: 5px 6px 2px 4px;

Here you have to calculate like a house cut, such as 5 pixels at the top, then 7 pixels on the right, then 2 pixels at the bottom and finally 4 pixels on the left.

The value of padding can be given in pixels (px), em or%.

If the value of padding is given as 2, then the first value will be up and down and the next value will be for right to left. E.g.

padding:10px 4px; If the padding will be 10 pixels from top to bottom and 4 pixels from right to left.

If 3 values ​​are given, the first one will take the top, the next one will take the right and left and the last one will take the bottom as padding.



Adding padding with width:


Such as the width of an element: 100px; Have and padding here: 10px; If there is, then in the end the width of the element will be 120 pixels. If for this problem box-sizing: border-box; If used, the original width will be returned.

See application

<!DOCTYPE html>
<html>
<head>
<style>
h1
border: 2px solid # f00;
padding: 15px;
width: 300px;}
</style>
</head>
<body>
<h1>Myhtmlcode</h1>
</body>
</html>

Here you will see how the padding is added with the width. Try using the box-sizing property again.

Margin:

Margins can create distance or space outside the element (outside the border). The rule of giving value is the same as padding, only here an additional value auto can be given.

See application:

<!DOCTYPE html>
<html>
<head>
<style>
h1
border: 2px solid # f00;
margin: 15px 30px;}
</style>
</head>
<body>
<h1>Myhtmlcode</h1>
</body>
</html>

If the value is auto somewhere, the browser calculates and takes a value.

If an element has to be placed in the middle of the div, it can be done with two properties. Margin margin: 0 auto; And specify the width. It will move right in the middle of the parent div (horizontally). If there is no div inside, it will move in the middle of the browser.

Like padding, width is not added here.
Facebook Comments

Follow by Email