Apa itu padding margin css?
|
Show Change the CSS code for This leaves a 20-pixel width space around the secondary header and the header itself is fat from the 40-pixel width padding. The four sides of an element can also be set individually. The Box ModelMargins, padding and borders (see next page) are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this: You don’t have to use all of these, but it can be helpful to remember that the box model can be applied to every element on the page, and that’s a powerful thing! In this introductory tutorial on Margins and Padding in CSS and HTML, we will explore some easy to use, creative applications to further enhance your ability to add space around an element. You may want to add space around an image or extend space between the web page border and the text you are displaying. Additionally, we will explore the different levels of spacing and come to truly understand the difference between Margins and Padding in CSS. Within that realm, we will also explore the many custom options you have to set the margins and padding with precise measurements. MarginsMargins control the spacing width between the edges of your web page and the element itself. The following are the four property options:
The margin syntax options are:
PaddingPadding controls the area immediately around your element. The following are the four property options:
The padding syntax options are:
To get a better understanding of where exactly padding and margins fit around an element, we can consider the box diagram. Margins are on the outside. Think of the margins you use on a piece of paper. These margins give space away from the edge of the paper. In HTML margins work the same way in giving space away from the edge of the page. Borders simply wrap the element. A border can wrap immediately around an element, or it may look further away from an element if more padding has been applied to the element. Padding provides space around the element. Think of wearing a heavier jacket in winter. The thicker the jacket, the more padding you have around you. And you, in this case, are the element. Defining Margins and PaddingUsing Numerical Values in PixelsHow do we calculate pixels? Display resolution indicates how many pixels are contained in a screen. For example, a 1080×1920 display is simply a grid that is 1080 pixels tall and 1920 pixels wide. On your web page. As we get into adding pixel dimensions, you will want to play with different numerical values to adjust the results that fit your needs. In the following code for the image property, we set the:
The web output looks as follows:  If we increase the padding we see the border move further away from the image because the padding property is first to wrap the element. |