so I’m in the box model and i’m kind of questioning everything I know in life. can someone explain what is horizontal about the left and right borders? don’t they travel vertically from the top to the bottom?
1 Like
Giving a visual example will help us help you. What are you referring to and what code do you have?
thanks for the response Dave. it’s not so much a single line of code not returning what I expected. It’s more into the theory of CSS.
In Learn CSS: The Box Model: 9. Margins II, we are told:
**p {** ** margin: 6px 10px 5px 12px;** **}**
In the example above, the four values 6px 10px 5px 12px refer to the amount of margin around the box in a clockwise rotation. In order, it specifies the amount of margin on the top (6 pixels), right (10 pixels), bottom (5 pixels), and left (12 pixels) sides of the box.
further down the example it provides the short cut code with the info:
**p {** ** margin: 6px 12px;** **}**
The first value, 6px, sets a margin value for the top and bottom of the box. The second value, 12px, sets a margin value for the left and right sides of the box.
the lesson than requests:
1. Using two values, set the h2 top and bottom margins to 30 pixels and the left and right margins to 20 pixels.
the correct code is:
**h2 {** ** margin: 30px 20px** **}**
the next lesson is Learn CSS: The Box Model: 10. Auto where it gives an example of the following code with the description:
**div {** ** margin: 0 auto;** **}**
In the example above, margin: 0 auto; will center the divs in their containing elements. The 0 sets the top and bottom margins to 0 pixels. The auto value instructs the browser to adjust the left and right margins until the element is centered within its containing element.
so it still follows that the first input (0) controls top and bottom margins, and the second input ( auto) controls left and right margins.
the lesson then requests:
2. In one line, set the vertical margins of the .pull-quote class to 0 and the horizontal margins to auto.
so as I’ve know all my life, horizontal should refer to the top and bottom margins, and the vertical should refer to the side margins. so the code should be:
.pull-quote { margin: auto 0; }
but as I’m sure you’re aware, my answer is incorrect. I’m being told the first input should be 0, which is what i’m instructed to set the vertical to. but the first input is supposed to be top bottom which should be horizontal.
how are top and bottom margins called vertical? and the sides horizontal?
I hope I made my question a little more clear.
thanks for your help.
Tom
are you familiar with these graphs, we are interested in the right one:
https://processing.org/tutorials/drawing/imgs/drawing-03.svg
you should picture the browser window you are currently looking at like this. (0,0) is the top left corner of your browser window.
the x-axis is horizontal, the y-axis is vertical. Its always been this way.
so we need to move something horizontal, we move it along the x-axis.
vertical is along the y-axis
1 Like
Yes, I get that x is the horizontal axis and y the vertical.
so if we were to write
.pull-quote {margin: 10px 30px;}
can we agree that the top and bottom (horizontal) margins will be 10 pixels and the left and right sides (vertical) margins will be 30 pixels?
top and bottom is vertical, it moves along the y-axis.
left and right is horizontal, moving along the x-axis
that’s what I’m not getting. top to bottom moves along the y axis. but the top itself is on the x axis. if the drawing you linked was a physical box, and I wanted to put something on the top i would put it on the horizontal x axis.
coordinates of a graph are generally written like this: (x, y) so if something is at the top left corner we have (0, 0) where the first zero is x coordinate, and the second zero is the y coordinate.
look at this example:
http://jsbin.com/?html,css,output
we need margin: 0 because body has a margin by default.
I want you to imaging body is a graph like the one i showed you earlier. The top left corner of the div is at position (0, 0) of body. if we then move it down using top, lets say 50px (uncomment it in the example), then the new coordinates of the div become (0, 50). It moved along the y-axis, the x-axis is still zero.
i don’t see how top is on the x-axis, yes, it has an x=coordinate, it needs to. But anything moved horizontal (along the x-axis) still has a y-coordinate. All elements need two coordinates in order to position.
1 Like
so we’re essentially talking about a moving line? moving from left to right, creates a horizontal line? so what we call left and right margins is actually a horizontal line moving from left to right? even though it creates a horizontal line, we still only recognize the origin and destination as their vertical axis?
I am not sure i would call it a moving line, but we do place all elements on a specific place on the axis using x and y coordinates.
the x and y coordinates are the position of the top left corner of an element. In case of the jsbin example, the top left corner of the div was position at (0, 0) or (0, 50) depending what you set the margin to.
Elements sit in the top-left corner, unless placed elsewhere. For example body has a margin of 8px by default, so if i hadn’t overwritten it, the div would sit at (8,8) by default
everything is calculated from the top-left corner. Even Windows (or any other OS) uses the same system to position windows on your desktop environment. I am sure this has legacy reasons
1 Like
sorry to be so thick headed here.
if i write
p {margin-top: 30px;}
will that have an effect on the x axis or the y axis?
do you understand the difference between x/y axis and x/y coordinate?
margin-top will change the y coordinate, the x coordinate stays the same. Lets say the element (top left corner of element) was at (0,0) then adding margin-top of 30px will change the coordinates to (0,30)
so the element moves along the y-axis, and retains its x-coordinate
I think i kind of get it. to create a top margin along the x axis, we’re instructing how far to travel vertically above the top of the border we’re going to extend our horizontal line.
I think I’m hung up on the physical world where I can place my cup of coffee on the top of my desk, a horizontal surface, and it won’t spill.
Your desk is horizontal, it moves from left to right just like the x-axis. If you move your cup from the left side to the right side, you move it along the x-axis.
but your desk also has y-axis, if you move the cup further away from you, or towards you, you move the cup along the y-axis of the surface of your desk
actually, your desk has 3 axis: x, y and z (z is the height its up from the ground or down from the ceiling)
the z-axis also exist within programming, the mug/cup is on your desktop, so its higher then your desk (higher z value, assuming we measure from the ground), the same trick used in overlapping elements in html
if you place something under your desk on the gruond, it has a lower z value then the desktop but a higher z-value then the floor
x, y are everywhere 
Even real life examples, if done right.
1 Like
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.