One place for hosting & domains

      Border

      How To Adjust the Content, Padding, Border, and Margins of an HTML Element With CSS



      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will learn about the CSS Box Model, a model used to refer to the content, padding, border, and margins of an HTML element. Understanding the CSS Box Model is helpful for adjusting the size of any of these parts of an HTML element and understanding how the size and position of elements is determined. This tutorial will begin by explaining each of the boxes of the CSS Box Model and then move on to a practical exercise on adjusting their values using CSS style rules.

      Diagram of CSS Box Model

      Prerequisites

      To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

      The CSS Box Model

      An HTML element can be understood as a series of four overlapping boxes:

      • The content box is the innermost box where the text or image content is placed. By default, its size is frequently set by the size of the content it contains. It is also the only box in the box model whose value is typically not zero by default (if it contains content); in contrast, the padding, border, and margin of an element default to zero for many HTML elements (such as <p>, <h1>, and <img> elements) unless you specify otherwise. When you set values for the width and height of an element, you are typically changing the width and height of the content box.
      • The padding box is the second overlapping box, which consists of a transparent space that surrounds the content box. By default, the padding of many HTML elements is set to zero. Increasing the size of an element’s padding increases the distance between the content box and the border box.
      • The border box is the third overlapping box that surrounds the padding box. By default, the border value of most HTML elements is set to zero. Increasing the size of an element’s border increases the distance between the padding box and the margin box. Note that the color, thickness, and style of the border can be adjusted.
      • The margin box is the fourth and final overlapping box that consists of transparent space outside of the border of an element. By default, the margin value of some HTML elements is set to zero, though some elements have specified margin values as their default, such as the <h1> through <h6> heading tags. Margins of two different elements are also allowed to overlap sometimes in a behavior called margin collapse. When this happens, the margin size defaults to the size of whichever element’s margin is the largest.

      Now that you are familiar with the components of the CSS Box Model, you can practice styling these different boxes to explore how they work together to lay out and style an HTML element. You’ll start by creating a <div> element that contains text content and then adjust the values of each of these boxes to help demonstrate their location in an element.

      Adjusting The Content Size of an HTML Element With CSS

      First, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

      Erase everything in your styles.css file (if the file contains content from previous tutorials) and add the following CSS rule to your styles.css file:

      styles.css

      .yellow-div {
        background-color:yellow;
      }
      

      Save the styles.css file. You have just created a class using the class selector yellow-div. Any <div> element you assign this class will have a yellow background color.

      Next, erase all the content in your index.html file (except for the first line of code: <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/css/styles.css">) and add the following code snippet:

      index.html

      <div class="yellow-div">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div> 
      

      Save the file and load it in the browser. You should receive the following results:

      Webpage with text in yellow <div> containers

      Your webpage should display a yellow box that contains the text content you added to the HTML file. Currently, only the innermost box—the content box—has a size and value; the padding, border, and margin are all set to zero. Notice also that the width and height of the yellow box is automatically determined by the size of the text content inside the <div> container. Try adding or subtracting text content to experiment with how the size of the <div> container changes accordingly.

      Note: You can use Firefox’s Web Developer tools to view the box model of an HTML element and the values set for each box. Navigate to the Tools menu item in the top menu bar and select “Web Developer/Toggle Tools” from the dropdown menu. The Developer Tools should appear in the bottom of your window. Click the the arrow icon on the far left of the tool kit menu and then click on the element that you wish to inspect. The box model of the selected element will show up in the bottom right of the Developer Tools window pane. You may need to expand the window to view it.

      Gif of using Firefox Web Developer tools to view the box model of an element

      Next, let’s specify the width of the <div> container to study how that changes the presentation of the element in the browser. Add the following highlighted line to your CSS rule in your styles.css file to set the width to 500 pixels:

      styles.css

      .yellow-div {
        background-color:yellow;
        width: 500px;
      }
      

      Save the file and load it in your browser. Your <div> container should now be 500 pixels wide, with its height automatically adjusting to allow the text content to fit inside:

      Webpage with text `div` container that is 500 pixels wide

      Note that you can also specify the height of a <div> element instead and allow for the width to adjust automatically. Or you can specify both the height and width, but be aware that the content will spill over the <div> container if the <div> element is too small.

      How To Adjust the Padding Size of an HTML Element With CSS

      Next, let’s increase the padding size to study how it changes the display of the <div> element. Add the following highlighted line to your CSS rule in your styles.css file to set the padding to 25 pixels:

      styles.css

       .yellow-div {
        background-color:yellow;
        width: 500px;
        padding:25px;
      }
      

      Save the styles.css file and reload the index.html file in your browser. The size of the yellow box should have expanded to allow for 25 pixels of space between the text content and the perimeter of the box:

      Webpage with a yellow `<div>` container with width and padding specified

      You can change the size of the padding by adjusting the padding value size. You can also change the padding size of specific sides of the element by using the following properties: padding-left, padding-right, padding-top, padding-bottom. For example, try replacing the declaration padding:25px; in your styles.css file with the highlighted snippet below:

      styles.css

       .yellow-div {
        background-color:yellow;
        width: 500px;
        padding-left:25px;
        padding-right: 50px;
        padding-top: 100px;
        padding-bottom: 25px;
      }
      

      Save the styles.css file and load the index.html file in your browser. You should receive something like this:

      Webpage with a yellow <div> container with different padding values set for each side

      Knowing how to specify padding sizes for individual sides of an element can be useful when arranging content on a webpage.

      Adjusting the Border Size, Color, and Style of an HTML Element With CSS

      Let’s now practice setting values for the border of an HTML element. The border property lets you set the size, the color, and the style (such as solid, dashed, dotted, inset, and outset) of an HTML element. These three values are set by assigning them to the border property like so:

      selector {
        border: size style color;
      }
      

      Try adding the following highlighted declaration to add a solid black border that is five pixels wide:

      styles.css

      .yellow-div {
        background-color:yellow;
        width: 500px;
        padding: 25px;
        border: 5px solid black;
      }
      

      (You may want to erase your different padding declarations from the previous tutorial section and replace them with the single padding:25px; declaration to keep the ruleset manageable). Save the styles.css file and reload index.html in your browser to inspect the changes. Your yellow box should now have a border with the values you set in the CSS rule:

      Webpage with yellow `<div>`, padding, and border

      You can try changing the values to study how they change the display of the element in the browser. Like with padding, you can also specify the border side you’d like to adjust with the properties border-right, border-left, border-top, border-bottom.

      Adjusting the Margin Size of an HTML Element With CSS

      Next, let’s try adjusting the size of the margins of an element with CSS. In this exercise, we’ll give the margins a very large value so that it is easy to see how margin size is displayed in the browser. Add the following highlighted declaration to your ruleset in your styles.css file to set the margin to 100 pixels:

      styles.css

        .yellow-div {
        background-color:yellow;
        width: 500px;
        padding: 25px;
        border: 5px solid black;
        margin:100px;
      }
      

      Save the styles.css file and reload index.html in your browser to inspect the changes. The yellow box should have moved 100 pixels down and 100 pixels to the right to allow for the 100 pixels of margin space between its border and the edges of the viewport:

      Webpage with `<div>` with padding, border, margins specified

      Note: You may have noticed that the yellow box originally had a small margin of white space between its top and left side and the edges of the viewport. This margin is automatically created by some browsers to allow for space between the edges of the viewport and the website content. You can remove this margin by setting the top and left margin to zero.

      Like the padding and border, the sizes of specific sides of the margin can be set using margin-left, margin-right, margin-top, and margin-bottom.

      Before moving on, add another <div> container to the page to study how the margin affects the position of nearby content. Without erasing anything, add the additional CSS ruleset to your styles.css file:

      styles.css

      . . .
      .blue-div {
        height:100px;
        width:100px;
        background-color: blue;
      }
      

      Save the file and return to your index.html file. Without erasing anything, add the following <div> element to your file and assign it the blue-div class:

      index.html

      …
      <div class="blue-div"></div>
      

      Save your index.html file and load it in the browser. You should receive something like this:

      Two `<divs>` containers with margin space between them

      The browser should now display a blue box that is 100 pixels wide and 1000 pixels high. This blue box should be 100 pixels below the yellow box on account of the yellow box’s margin. In general, surrounding elements will by default be pushed away from an element on account of its margin. Be aware, however, that the margins of adjacent elements will often overlap due to margin collapse. The size of the overlapping margin is determined by the size of the largest margin between the two elements.

      Conclusion

      In this tutorial you learned about the CSS box model and how to adjust the size of each of its content, padding, border, and margin properties. Understanding the behavior of these properties and how to set values for them is useful when organizing and styling content on a webpage. This knowledge will be useful when building the demonstration website in the remaining tutorials. In the next tutorial, you will set up an index.html file to serve as the website’s homepage.



      Source link

      Gradient Borders and Border Images in Pure CSS


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Borders in CSS are old news, but maybe you didn’t know that border images and gradient borders are also possible with CSS now, thanks to two properties: border-image-source and border-image-slice.

      Border Images

      You can use images that replace the default border style. Here’s a simple example. First, our markup:

      <div class="box box-1">Just a box! 😄</div>
      

      And then the styles for our box:

      .box {
        width: 400px;
        height: 200px;
        max-width: 100%;
        background: var(--bg2);
        margin: 1rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
      }
      
      .box-1 {
        border: 20px solid;
        border-image-source: url(/url/to/some/fancy/image.jpg);
        border-image-slice: 60 30;
      }
      

      Just a box! 😄

      You’ll notice that there’s still needs to be a regular border applied to the element because the border image replaces the regular border style.

      border-image-source specifies the source image, which can be a URL to a raster or vector-based image (SVG) or a data URI.

      border-image-slice is also needed in order for the desired effect to be achieved. That one can be a little complicated to fully grasp, but the gist of it is that behind the scenes the engine slices the image into a 3 X 3 grid, with the center section being transparent by default. border-image-slice is used to specify how the image is distributed on that grid. It can take up to 4 values which can be numerical or percentage values. Here’s a great reference article by Codrops and another one by CSS-Tricks if you want to venture into fully understanding border-image-slice.


      Shorthand property with border-image

      There’s a shorthand property to specify the values for both border-image-source and border-image-slice all at once: border-image. Here’s the same example, but using the shorthand:

      .box-1 {
        border: 20px solid;
        border-image: url(/url/to/some/fancy/image.jpg) 60 30;
      }
      

      Gradient Borders

      Since gradients in CSS are really generated images, creating gradient borders is as simple as using a linear, radial or conic gradient in place of a regular image source.

      First, a linear gradient border:

      .box-2 {
        border: 10px solid;
        border-image-source: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66));
        border-image-slice: 1;
      }
      

      Linear gradient! 😄

      As you’ll notice, the slicing on such gradients is much simpler and a simple value of 1 will do. So, using the shorthand, we get:

      .box-2 {
        border: 10px solid;
        border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
      }
      

      Here’s the same example, but as a radial gradient:

      .box-3 {
        border: 10px solid;
        border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
      }
      

      Radial gradient! 😄


      And then finally a conic gradient for good measure, here with all the hues of the color wheel to create a rainbow gradient:

      .box-4 {
        border: 10px solid;
        border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
      }
      

      I ❤️ 🌈

      What About Border Radius?

      Unfortunately border images can’t have a radius just yet, so if you want your element to have a border radius and a gradient border, you’ll have to resort to using a workaround that probably involves another HTML element.

      Browser Support: As of 2020, Can I Use border-image? shows 99% of worldwide browsers supporting the border-image property.



      Source link