Basic CSS Tutorial
Add a Property to PART of a Box
I have my text added to my page and I have part of it floated next to the table but now, because of the margin we put around the table, the text is sitting too high and looks odd. We can level it with the top of the table by taking away the margin at the top of the table.When we use margin: 1em;, we're adding that margin to all four sides of the table. We really only need the margin on the right side and across the bottom for this particular table. When you use multiple values in a property like margin or padding, the browser understands them to read in a clockwise direction, starting at the top - top, right, bottom, left.
In the table section of your CSS file, change your margin to
margin: 0 1em 1em 0;
That's still not quite what I want for the text but the table has moved left and up to the limits of its space. Spacing
around a floated object can be tricky but we're going to handle this issue by wrapping that floating text in a div and
adding an inline margin above it.
Just under the /table in your page, add a new div <div style="margin-top: 5em;">. Put it's closing /div at the end of the fourth sentence.
In the first example, we added multiple margins in one statement. In the second, we specified which side of the box we wanted to change. We can use top, right, bottom or left. Padding works the same way - padding-bottom: 1em; - and there are several other properties, including border, that can be specified in this way. So we can set each of the four borders on our page in a different style, width or color - or all three.
border-right: 10px dotted #ff00ff;
Sometimes the order in which you list things in your CSS file matters. The links (a) pretty much HAVE to be in the order listed in the original CSS file from Lesson 3. Sometimes the properties also have to be listed in the right order. To add that right border, I have to put it AFTER the black border OR remove the single black border statement and add separate ones for each of the other three sides. This, again, is because your browser loads each property as it comes to it. So leave the black margin and add the dotted one under it. The browser will load the black and then load the dotted. If you put the dotted first, you'll see the black.
How it looks. Check out that dotted border on the right.
Previous Next