HCI: Laboratory Activity #6 - Working with Margins, Padding, Alignment, and Floating

• The margin and padding properties—For adding space around elements

• The align and float properties—Used to place your elements in relation to others

Using Margins

Style sheet margins enable you to add empty space around the outside of the rectangular area for an element on a web page. It is important to remember that the margin property works with space outside of the element.
Following are the style properties for setting margins:

• margin-top—Sets the top margin

• margin-right—Sets the right margin

• margin-bottom—Sets the bottom margin

• margin-left—Sets the left margin

• margin—Sets the top, right, bottom, and left margins as a single property

When using shorthand for setting margins, padding or borders, there are actually three approaches, which vary based on how many values you use when setting the property:

• One value—The size of all the margins

• Two values—The size of the top/bottom margins and the left/right margins (in that order)

• Four values—The size of the top, right, bottom, and left margins (in that order)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
  <title>Color Blocks</title>    <style type="text/css">
       div {
          width:250px;
          height:100px;
          border:5px solid #000000;
          color:black;
          font-weight:bold;
          text-align:center;
       }

       div#d1 {
          background-color:red;
          margin:15px;
       }

       div#d2 {
          background-color:green;
          margin:15px;
       }

       div#d3 {
          background-color:blue;
       }

       div#d4 {
          background-color:yellow;
          margin:15px;
       }
    </style>
  </head>

  <body>
    <div id="d1">DIV #1</div>
    <div id="d2">DIV #2</div>
    <div id="d3">DIV #3</div>
    <div id="d4">DIV #4</div>
  </body>
</html>

#2 Revise #1

div#d1 {
  background-color:red;
  margin:0px;
}

div#d2 {  background-color:green;
  margin:5px 0px 0px 15px;
}

div#d3 {
  background-color:blue;
  margin:0px 0px 0px 75px;
}

div#d4 {
  background-color:yellow;
  margin:25px 0px 0px 250px;
}

#3 Revise Again

body {
  margin:0px;
}
div {
  width:250px;
  height:100px;
  color:black;
  font-weight:bold;
  text-align:center;
}
div#d1 {
  border:5px solid #000000;
  background-color:red;
  margin:0px;
}
div#d2 {
  border-width:6px 6px 3px 6px;
  border-style:solid;
  border-color:#000000;
  background-color:green;
  margin:10px 0px 0px 15px;
}
div#d3 {
  border-width:3px 6px 6px 6px;
  border-style:solid;
  border-color:#000000;
  background-color:blue;
  margin:0px 0px 0px 15px;
}
div#d4 {
  border:5px solid #000000;
  background-color:yellow;
  margin:0px 0px 0px 265px;
}

#4 Revise Again

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Color Blocks</title>
    <style type="text/css">
      body {
         margin:0px;
      }
      div {
         width:250px;
         height:100px;
         border:5px solid #000000;
         color:black;
         font-weight:bold;
         margin:25px;
      }

      div#d1 {
         background-color:red;
         text-align:center;
         padding:15px;
      }

      div#d2 {
         background-color:green;
         text-align:right;
         padding:25px 50px 6px 6px;
      }

      div#d3 {
         background-color:blue;
         text-align:left;
         padding:6px 6px 6px 50px;
      }

      div#d4 {
         background-color:yellow;
         text-align:center;
         padding:50px;
      }
    </style>
  </head>

  <body>
    <div id="d1">DIV #1</div>
    <div id="d2">DIV #2</div>    <div id="d3">DIV #3</div>
    <div id="d4">DIV #4</div>
  </body>
</html>

#5 Float

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Color Blocks</title>
    <style type="text/css">
      body {
         margin:0px;
      }
      div {
         width:250px;
         height:100px;
         border:5px solid #000000;
         color:black;
         font-weight:bold;
         margin:25px;
      }

      div#d1 {
         background-color:red;
         float:left;
      }

      div#d2 {
         background-color:green;
         float:left;
      }

      div#d3 {
         background-color:blue;
         float:left;
      }
    </style>
  </head>

  <body>
    <div id="d1">DIV #1</div>
    <div id="d2">DIV #2</div>
    <div id="d3">DIV #3</div>
  </body>
</html>

HCI

Huwebes, Enero 31, 2019

Laboratory Activity #6 - Working with Margins, Padding, Alignment, and Floating

Using Margins

Walang komento:

Mag-post ng isang Komento