This property is used to control the spacing between the element’s border and its main content. The following diagram should make the arrangement clearer.Īs apparent from the diagram, the padding of an element is the layer that extends from the outer edge of the element’s content to the inner edge of its border. The margin of the element is its external layer, i.e., it lies outside the element. The borders in turn surround the padding. The padding surrounds the element’s content. The content area of an element lies in the middle of the element. The size of this rectangular box is determined by the element’s: The Box ModelĮlements in CSS are represented as a rectangular box. We will also discuss margin collapsing, the effect of using different units while creating responsive websites, and conclude with some layout tricks you can do with CSS margins and padding. In this tutorial, you will learn the difference between CSS margins and padding and how these properties affect the space between elements on a webpage. They seemed very similar and in some cases appeared to produce the same result. When I was just starting to learn CSS, the margin and padding properties always confused me. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! This article was peer reviewed by Dave Maxwell, Adrian Sandu, and Panayiotis Velisarakos.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |