HTML и CSS пытаются получить некоторое вертикальное пространство вокруг моих уравнений - PullRequest
Новая
       58

HTML и CSS пытаются получить некоторое вертикальное пространство вокруг моих уравнений

0 голосов
/ 25 декабря 2011

Все, что я пытаюсь сделать, это получить некоторый вертикальный интервал вокруг уравнений. Я хочу установить определенное количество места, которое появляется перед уравнением, и определенное количество после. Я пробую разные вещи, но это всегда кажется чем-то сумасшедшим. Я понимаю, что маржа падает, но это явно больше, чем это происходит. Я добавил немного абсурдного пространства, чтобы проиллюстрировать глупость. Кто-нибудь может помочь?

calcStyle.css: 

body {font-size:180%;}
h2 {font-size:250%;}
h1 {font-size:170%;}
table {font-size:150%}
body {margin-left:30px;}
body {margin-right:30px;}
body {background-color:#ffffff;}
blockquote {
    margin-left 55px;
    margin-right 55px;
    font-style: italic;}
h1 {color:#222222;}
td {
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
}

th {
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
}
equation {
    margin-left:10px;
    margin-right:10px;
    padding-top:100px;
    padding-bottom:100px;
    padding-left:100px;
    padding-right:100px;
    margin-top:100px;
    margin-bottom:100px;
    border:50px #eeeeee;
    background-color: #ddddaa
}

HTML: 

<head>
    <link rel="stylesheet" type="text/css" href="calcStyle.css" />
</head>
<body>
    easy math: <br />

    <equation>
        2+2=4
    </equation>
    <br /> 
    hard math:
    <br />
    <equation>
        3+3=6
    </equation>
    <br /><br />
</body>

Результат:

enter image description here

Ответы [ 3 ]

1 голос
/ 25 декабря 2011

Я бы порекомендовал использовать div и установить класс в «уравнение», потому что «уравнение» не является допустимым HTML-тегом. Например, здесь 

easy math:

<div class="equation">
    2+2=4
</div>

hard math:
<div class="equation">
    3+3=6
</div>
1 голос
/ 25 декабря 2011

У вас отключены поля. Я исправил их здесь .

В общем, вы можете написать свои поля как: margin: top right bottom left, чем их атрибуты margin-* - где верхний, правый, нижний и левый представляют значения ширины в пикселях, которые вы можете задать в соответствии со своими потребностями.

0 голосов
/ 25 декабря 2011

Добавьте display: inline-block; к вашему equation. Это решит это. т.е.

в вашем css: 

equation {
  ...
  display: inline-block;
  ...
}

Скрипка: http://jsfiddle.net/VGwwL/

...